JavaScript网页设计案例
JavaScript 是一种强大的客户端脚本语言，广泛用于网页开发中，可以实现丰富的交互效果和动态内容。下面是一些常见的 JavaScript 网页设计案例，每个案例都会提供简要说明和示例代码。
1. 动态导航菜单
说明：当用户鼠标悬停在导航菜单项上时，显示子菜单。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Navigation Menu</title>
<style>
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li class="dropdown">
<a href="#">Menu</a>
<div class="dropdown-content">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
<a href="#">Submenu 3</a>
</div>
</li>
</ul>
</nav>
</body>
</html>
2. 图片轮播
说明：自动切换图片，并允许用户手动切换。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Carousel</title>
<style>
.carousel {
width: 100%;
overflow: hidden;
}
.carousel-images {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-images img {
width: 100%;
height: auto;
}
.dots {
display: flex;
justify-content: center;
margin-top: 10px;
}
.dot {
cursor: pointer;
width: 15px;
height: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
}
.active {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-images" id="carousel-images">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<div class="dots" id="dots"></div>
<script>
const images = document.getElementById('carousel-images');
const dotsContainer = document.getElementById('dots');
const numImages = images.children.length;
let currentIndex = 0;
// Create dots
for (let i = 0; i < numImages; i++) {
const dot = document.createElement('div');
dot.classList.add('dot');
if (i === 0) dot.classList.add('active');
dot.addEventListener('click', () => showImage(i));
dotsContainer.appendChild(dot);
}
function showImage(index) {
images.style.transform = `translateX(-${index * 100}%)`;
const dots = dotsContainer.children;
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active');
}
dots[index].classList.add('active');
currentIndex = index;
}
// Auto-play
setInterval(() => {
const nextIndex = (currentIndex + 1) % numImages;
showImage(nextIndex);
}, 3000);
</script>
</body>
</html>
3. 表单验证
说明：在表单提交前进行简单的验证，确保必填字段不为空。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<div id="nameError" class="error"></div>
<label for="email">Email:</label>
<input type="email" id="email" required>
<div id="emailError" class="error"></div>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name');
const email = document.getElementById('email');
const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
nameError.textContent = '';
emailError.textContent = '';
if (!name.value) {
nameError.textContent = 'Name is required';
}
if (!email.value) {
emailError.textContent = 'Email is required';
} else if (!isValidEmail(email.value)) {
emailError.textContent = 'Invalid email format';
}
if (!nameError.textContent && !emailError.textContent) {
alert('Form submitted successfully!');
this.reset();
}
});
function isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
</script>
</body>
</html>
4. 模态框（弹出窗口）
说明：点击按钮时显示一个模态框，点击关闭按钮或背景时关闭模态框。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Box</title>
<style>
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="openModalBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
const modal = document.getElementById('myModal');
const btn = document.getElementById('openModalBtn');
const span = document.getElementsByClassName('close')[0];
btn.onclick = function() {
modal.style.display = 'block';
}
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
</body>
</html>
这些案例展示了如何使用 JavaScript 实现一些常见的网页功能。你可以根据需要调整和扩展这些示例代码，以满足你的具体需求。
原文地址：https://blog.csdn.net/asdfghjjk11111/article/details/143652376
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！