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的你有所帮助！