<!-- 注冊表單 -->  
<form id="register-form">  
  <input type="text" id="register-username" placeholder="用戶名">  
  <input type="password" id="register-password" placeholder="密碼">  
  <button type="submit">注冊</button>  
</form>  
  
<!-- 登錄表單 -->  
<form id="login-form">  
  <input type="text" id="login-username" placeholder="用戶名">  
  <input type="password" id="login-password" placeholder="密碼">  
  <button type="submit">登錄</button>  
</form>

// 用戶數(shù)據(jù)庫（模擬）  
const users = {};  
  
// 注冊功能  
document.getElementById('register-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
  const username = document.getElementById('register-username').value;  
  const password = document.getElementById('register-password').value;  
  if (username && password) {  
    users[username] = { password };  
    alert('注冊成功！');  
    // 清空表單  
    document.getElementById('register-username').value = '';  
    document.getElementById('register-password').value = '';  
  } else {  
    alert('請輸入用戶名和密碼！');  
  }  
});  
  
// 登錄功能  
document.getElementById('login-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
  const username = document.getElementById('login-username').value;  
  const password = document.getElementById('login-password').value;  
  if (users[username] && users[username].password === password) {  
    alert('登錄成功！');  
    // 這里可以添加登錄成功后的操作，比如顯示用戶面板等  
  } else {  
    alert('用戶名或密碼錯誤！');  
  }  
});

<!-- 發(fā)表文章表單 -->  
<form id="new-post-form">  
  <input type="text" id="post-title" placeholder="文章標題">  
  <textarea id="post-content" placeholder="文章內(nèi)容"></textarea>  
  <button type="submit">發(fā)布</button>  
</form>  
  
<!-- 文章列表 -->  
<ul id="post-list"></ul>

// 發(fā)表文章功能  
document.getElementById('new-post-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
  const title = document.getElementById('post-title').value;  
  const content = document.getElementById('post-content').value;  
  if (title && content) {  
    const li = document.createElement('li');  
    li.innerHTML = `<h3>${title}</h3><p>${content}</p>`;  
    document.getElementById('post-list').appendChild(li);  
    // 清空表單  
    document.getElementById('post-title').value = '';  
    document.getElementById('post-content').value = '';  
  } else {  
    alert('請輸入文章標題和內(nèi)容！');  
  }  
});

<!-- 評論表單 -->  
<form class="comment-form">  
  <input type="text" class="comment-content" placeholder="評論內(nèi)容">  
  <button type="submit">提交</button>  
</form>

// 評論功能  
document.addEventListener('DOMContentLoaded', function() {  
  const commentForms = document.getElementsByClassName('comment-form');  
  for (let i

<!-- 發(fā)表文章表單 -->  
<form id="new-post-form">  
  <input type="text" id="post-title" placeholder="文章標題">  
  <textarea id="post-content" placeholder="文章內(nèi)容"></textarea>  
    
  <!-- 圖片上傳 -->  
  <label for="post-image">文章圖片：</label>  
  <input type="file" id="post-image" accept="image/*">  
  <img id="image-preview" src="" alt="預覽" style="max-width: 200px; display: none;">  
    
  <!-- 視頻上傳 -->  
  <label for="post-video">文章視頻：</label>  
  <input type="file" id="post-video" accept="video/*">  
  <video id="video-preview" controls style="max-width: 600px; display: none;"></video>  
    
  <button type="submit">發(fā)布</button>  
</form>  
  
<!-- 文章列表 -->  
<ul id="post-list"></ul>

// 預覽圖片和視頻  
document.getElementById('post-image').addEventListener('change', function(e) {  
  const file = e.target.files[0];  
  if (file) {  
    const reader = new FileReader();  
    reader.onload = function(event) {  
      document.getElementById('image-preview').src = event.target.result;  
      document.getElementById('image-preview').style.display = 'block';  
    };  
    reader.readAsDataURL(file);  
  }  
});  
  
document.getElementById('post-video').addEventListener('change', function(e) {  
  const file = e.target.files[0];  
  if (file) {  
    const reader = new FileReader();  
    reader.onload = function(event) {  
      document.getElementById('video-preview').src = event.target.result;  
      document.getElementById('video-preview').style.display = 'block';  
    };  
    reader.readAsDataURL(file);  
  }  
});  
  
// 發(fā)表文章功能  
document.getElementById('new-post-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
    
  const title = document.getElementById('post-title').value;  
  const content = document.getElementById('post-content').value;  
  const imagePreview = document.getElementById('image-preview');  
  const videoPreview = document.getElementById('video-preview');  
    
  let postHTML = `<h3>${title}</h3><p>${content}</p>`;  
    
  if (imagePreview.style.display === 'block') {  
    postHTML += `<img src="${imagePreview.src}" alt="文章圖片">`;  
  }  
    
  if (videoPreview.style.display === 'block') {  
    postHTML += `<video controls>${videoPreview.outerHTML}</video>`;  
  }  
    
  const li = document.createElement('li');  
  li.innerHTML = postHTML;  
  document.getElementById('post-list').appendChild(li);  
    
  // 清空表單和預覽  
  document.getElementById('post-title').value = '';  
  document.getElementById('post-content').value = '';  
  imagePreview.style.display = 'none';  
  imagePreview.src = '';  
  videoPreview.style.display = 'none';  
  videoPreview.src = '';  
});