1. 动态响应式导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body { margin: 0; font-family: Arial, sans-serif; }.navbar { background-color: #333; overflow: hidden; }.navbar a { float: left; display: block; color: white; padding: 14px 20px; text-decoration: none; }.navbar a:hover { background-color: #ddd; color: black; }@media screen and (max-width: 600px) {.navbar a { float: none; width: 100%; text-align: center; }}</style>
</head>
<body><div class="navbar"><a href="#home">Home</a><a href="#services">Services</a><a href="#contact">Contact</a><a href="#about">About</a></div>
</body>
</html>
- 说明：通过简单的CSS和媒体查询实现响应式导航栏，适配不同屏幕尺寸。
2. 图片懒加载 (Lazy Loading)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Lazy Loading</title><style>img { width: 100%; height: auto; display: block; margin: 10px 0; }</style>
</head>
<body><img data-src="image1.jpg" alt="Image 1"><img data-src="image2.jpg" alt="Image 2"><img data-src="image3.jpg" alt="Image 3"><script>document.addEventListener("DOMContentLoaded", function() {const lazyImages = document.querySelectorAll("img[data-src]");const lazyLoad = () => {lazyImages.forEach(img => {if (img.getBoundingClientRect().top < window.innerHeight) {img.src = img.getAttribute("data-src");}});};window.addEventListener("scroll", lazyLoad);lazyLoad();});</script>
</body>
</html>
- 说明：使用JavaScript懒加载图片，减少初始加载时间并提高页面性能。
3. 简单图片滑动切换 (Carousel)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.carousel { position: relative; max-width: 500px; margin: auto; }.carousel img { width: 100%; }.prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; color: white; background-color: rgba(0, 0, 0, 0.5); border: none; }.prev { left: 0; }.next { right: 0; }</style>
</head>
<body><div class="carousel"><img src="image1.jpg" class="slides"><img src="image2.jpg" class="slides" style="display:none"><img src="image3.jpg" class="slides" style="display:none"><button class="prev" onclick="changeSlide(-1)">❮</button><button class="next" onclick="changeSlide(1)">❯</button></div><script>let currentIndex = 0;function changeSlide(direction) {let slides = document.querySelectorAll(".slides");slides[currentIndex].style.display = "none";currentIndex = (currentIndex + direction + slides.length) % slides.length;slides[currentIndex].style.display = "block";}</script>
</body>
</html>
- 说明：简单的图片轮播，带有“上一张”和“下一张”按钮切换功能。
4. 倒计时计时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#timer { font-size: 48px; text-align: center; margin-top: 20px; }</style>
</head>
<body><div id="timer"></div><script>function startTimer(duration) {let timer = duration, minutes, seconds;const display = document.getElementById("timer");setInterval(() => {minutes = Math.floor(timer / 60);seconds = timer % 60;seconds = seconds < 10 ? '0' + seconds : seconds;display.textContent = minutes + ":" + seconds;if (--timer < 0) timer = duration;}, 1000);}window.onload = () => startTimer(300); // 5-minute timer</script>
</body>
</html>
- 说明：一个简单的倒计时计时器，开始倒计时5分钟，时间到了会自动重置。
5. 表单验证 (Form Validation)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>input { display: block; margin: 10px 0; padding: 8px; width: 200px; }span { color: red; display: none; }</style>
</head>
<body><form id="form"><input type="text" id="username" placeholder="Username"><span id="error">Username is required</span><button type="submit">Submit</button></form><script>const form = document.getElementById("form");const username = document.getElementById("username");const error = document.getElementById("error");form.addEventListener("submit", (e) => {if (username.value === "") {error.style.display = "block";e.preventDefault();} else {error.style.display = "none";}});</script>
</body>
</html>
- 说明：JavaScript实现表单验证，未填写用户名时显示错误提示。
希望对刚接触js的你有所帮助！
