当前位置：首页 > news >正文

javascript网页设计案例

news 2025/8/12 0:45:07

设计一个具有良好用户体验的 JavaScript 网页涉及多个方面，如用户界面（UI）、用户体验（UX）、交互设计等。以下是一些示例案例，展示了如何使用 JavaScript 创建功能丰富且吸引人的网页设计。

1. 响应式导航菜单

功能：

动态生成的导航菜单，适应不同屏幕尺寸。
点击菜单按钮时展开/收起子菜单。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Navigation Menu</title><style>body { font-family: Arial, sans-serif; }.nav { display: flex; background-color: #333; }.nav a { color: white; padding: 14px 20px; text-decoration: none; display: block; }.nav a:hover { background-color: #575757; }.menu-toggle { display: none; }@media (max-width: 768px) {.nav { flex-direction: column; }.nav a { display: none; }.nav.show-menu a { display: block; }.menu-toggle { display: block; background: #333; color: white; padding: 14px; cursor: pointer; }}</style>
</head>
<body><div class="menu-toggle">Menu</div><div class="nav"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact</a></div><script>document.querySelector('.menu-toggle').addEventListener('click', function() {document.querySelector('.nav').classList.toggle('show-menu');});</script>
</body>
</html>

2. 动态表单验证

功能：

实时验证用户输入的数据，并显示错误消息。
提交表单时只有在所有字段正确填写的情况下才会被允许。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic Form Validation</title><style>.error { color: red; }</style>
</head>
<body><form id="myForm"><label for="email">Email:</label><input type="email" id="email" name="email" required><span class="error" id="emailError"></span><br><br><label for="password">Password:</label><input type="password" id="password" name="password" required><span class="error" id="passwordError"></span><br><br><input type="submit" value="Submit"></form><script>const form = document.getElementById('myForm');const emailInput = document.getElementById('email');const passwordInput = document.getElementById('password');const emailError = document.getElementById('emailError');const passwordError = document.getElementById('passwordError');emailInput.addEventListener('input', () => {if (!emailInput.validity.valid) {emailError.textContent = 'Please enter a valid email address.';} else {emailError.textContent = '';}});passwordInput.addEventListener('input', () => {if (passwordInput.value.length < 6) {passwordError.textContent = 'Password must be at least 6 characters long.';} else {passwordError.textContent = '';}});form.addEventListener('submit', (event) => {if (!emailInput.validity.valid || passwordInput.value.length < 6) {event.preventDefault();alert('Please correct the errors in the form.');}});</script>
</body>
</html>

3. 动态内容加载（AJAX）

功能：

从服务器动态加载内容，而无需刷新页面。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic Content Loading</title>
</head>
<body><button id="loadContent">Load Content</button><div id="content"></div><script>document.getElementById('loadContent').addEventListener('click', function() {fetch('https://api.example.com/content').then(response => response.json()).then(data => {document.getElementById('content').innerHTML = `<p>${data.message}</p>`;}).catch(error => console.error('Error fetching content:', error));});</script>
</body>
</html>

4. 图表展示

功能：

使用 JavaScript 库（如 Chart.js）创建和展示图表。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chart Example</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body><canvas id="myChart" width="400" height="200"></canvas><script>const ctx = document.getElementById('myChart').getContext('2d');const myChart = new Chart(ctx, {type: 'bar',data: {labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],datasets: [{label: '# of Votes',data: [12, 19, 3, 5, 2, 3],backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1}]},options: {scales: {y: {beginAtZero: true}}}});</script>
</body>
</html>