console
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);
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);
});
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);
}
}
document.addEventListener('DOMContentLoaded', () => {
const forumForm = document.querySelector('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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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>
<div class="banner">
< img src="images/banner1.jpg" alt="Banner1" class="active">
< img src="images/banner2.jpg" alt="Banner2">
<div class="banner-controls">
<button class="prev"><</button>
<button class="next">></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>© 2025 柴犬网站. 版权所有 | 设计:你的姓名</p >
</footer>
<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;
}