SOURCE

console 命令行工具 X clear

                    
>
console
// 1. 显示当前日期和时间(自动更新)
function updateClock() {
  const clock = document.getElementById('clock');
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hour = String(now.getHours()).padStart(2, '0');
  const minute = String(now.getMinutes()).padStart(2, '0');
  const second = String(now.getSeconds()).padStart(2, '0');
  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
  const week = weekDays[now.getDay()];
  
  clock.innerHTML = `${year}${month}${day}${hour}${minute}${second}秒 星期${week}`;
}
setInterval(updateClock, 1000); // 每秒更新

// 2. 轮播图功能
const bannerImgs = document.querySelectorAll('.banner img');
const prevBtn = document.querySelector('.banner-controls .prev');
const nextBtn = document.querySelector('.banner-controls .next');
let currentIndex = 0;

function showBanner(index) {
  bannerImgs.forEach(img => img.classList.remove('active'));
  bannerImgs[index].classList.add('active');
}
function autoPlay() {
  currentIndex = (currentIndex + 1) % bannerImgs.length;
  showBanner(currentIndex);
}
setInterval(autoPlay, 3000); // 自动轮播

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + bannerImgs.length) % bannerImgs.length;
  showBanner(currentIndex);
});
nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % bannerImgs.length;
  showBanner(currentIndex);
});

// 3. DOM 节点操作(示例功能,可扩展)
function createNode() {
  const newNode = document.createElement('p');
  newNode.textContent = '新柴犬节点(创建)';
  document.body.appendChild(newNode);
}
function copyNode() {
  const target = document.getElementById('target-node');
  const copy = target.cloneNode(true);
  document.body.appendChild(copy);
}
function insertNode() {
  const nodeName = prompt('请输入要插入的节点名(如:p)');
  if (!nodeName) return;
  const newNode = document.createElement(nodeName);
  newNode.textContent = '用户插入的柴犬节点';
  const target = document.getElementById('target-node');
  target.parentNode.insertBefore(newNode, target.nextSibling);
}
function replaceNode() {
  const nodeName = prompt('请输入要替换的节点名(如:span)');
  if (!nodeName) return;
  const newNode = document.createElement(nodeName);
  newNode.textContent = '用户替换的柴犬节点';
  const target = document.getElementById('target-node');
  target.parentNode.replaceChild(newNode, target);
}
function deleteNode() {
  const isDelete = confirm('确定删除节点吗?');
  if (isDelete) {
    const target = document.getElementById('target-node');
    target.parentNode.removeChild(target);
  }
}

// 4. 表单验证(可在 forum.html 中完善,此处示例监听)
document.addEventListener('DOMContentLoaded', () => {
  const forumForm = document.querySelector('form'); // 需在 forum.html 中定义 form
  if (forumForm) {
    forumForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const confirmPwd = document.getElementById('confirm-pwd').value;
      const captcha = document.getElementById('captcha').value;
      
      if (!username || !password || !confirmPwd || !captcha) {
        alert('请填写完整信息!');
        return;
      }
      if (password !== confirmPwd) {
        alert('两次密码不一致!');
        return;
      }
      // 正则示例:用户名验证(字母数字)
      if (!/^[a-zA-Z0-9]+$/.test(username)) {
        alert('用户名仅支持字母和数字!');
        return;
      }
      // 提交后显示信息
      const result = document.createElement('div');
      result.innerHTML = `
        <h3>注册信息</h3>
        <p>用户名:${username}</p >
        <p>密码:${password}</p >
      `;
      forumForm.appendChild(result);
    });
    // 显示/隐藏密码
    const showPwdBtn = document.getElementById('show-pwd');
    if (showPwdBtn) {
      showPwdBtn.addEventListener('click', () => {
        const pwdInput = document.getElementById('password');
        pwdInput.type = pwdInput.type === 'password' ? 'text' : 'password';
      });
    }
  }
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>柴犬世界 - Shiba Inu World</title>
  <!-- 外联 CSS -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- 头部:LOGO + 导航 + 日期时间 -->
  <header>
    <div class="logo">
      < img src="images/logo.png" alt="柴犬LOGO">
    </div>
    <nav>
      <ul>
        <li><a href=" ">首页</a ></li>
        <li><a href="about.html">关于柴犬</a ></li>
        <li><a href="gallery.html">柴犬图库</a ></li>
        <li><a href="forum.html">交流论坛</a ></li>
        <li><a href="contact.html">联系我们</a ></li>
      </ul>
    </nav>
    <div id="clock"></div> <!-- 显示日期时间 -->
  </header>

  <!-- Banner 轮播图容器 -->
  <div class="banner">
    < img src="images/banner1.jpg" alt="Banner1" class="active">
    < img src="images/banner2.jpg" alt="Banner2">
    <!-- 可扩展更多 Banner 图 -->
    <div class="banner-controls">
      <button class="prev">&lt;</button>
      <button class="next">&gt;</button>
    </div>
  </div>

  <!-- 主页内容 -->
  <main>
    <h1>欢迎来到柴犬世界</h1>
    <p>这里有可爱柴犬的故事、萌图,还有柴犬爱好者交流天地!</p >
    <div id="dom-manipulate">
      <h2>DOM 操作演示区</h2>
      <p>当前节点:<span id="target-node">柴犬主题内容</span></p >
      <button onclick="createNode()">创建节点</button>
      <button onclick="copyNode()">复制节点</button>
      <button onclick="insertNode()">插入节点</button>
      <button onclick="replaceNode()">替换节点</button>
      <button onclick="deleteNode()">删除节点</button>
      <div id="node-list">可选节点:<span>shiba-text</span></div>
    </div>
  </main>

  <!-- 底部版权 -->
  <footer>
    <p>&copy; 2025 柴犬网站. 版权所有 | 设计:你的姓名</p >
  </footer>

  <!-- 外联 JS -->
  <script src="js/script.js"></script>
</body>
</html>
/* 通用样式重置 */
* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}
body {
  font-family: "微软雅黑", sans-serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
}
header {
  width: 100%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}
.logo img {
  height: 50px;
}
nav ul {
  list-style: none;
  display: flex;
}
nav li {
  margin: 0 15px;
}
nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
}
nav a:hover {
  color: #e67e22;
}
.banner {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}
.banner img.active {
  opacity: 1;
}
.banner-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.banner-controls button {
  background: rgba(255,255,255,0.8);
  border: 1px solid #ccc;
  padding: 8px 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 4px;
}
main {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}
h1 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #e67e22;
}
footer {
  text-align: center;
  padding: 20px;
  background: #333;
  color: #fff;
}
#dom-manipulate {
  margin-top: 30px;
  border: 1px dashed #ccc;
  padding: 20px;
  background: #fff;
}