javascript网页设计案例

最新推荐文章于 2024-09-25 17:14:45 发布

御风行云天

最新推荐文章于 2024-09-25 17:14:45 发布

阅读量1.2k

点赞数 23

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/golove666/article/details/142146889

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

设计一个具有良好用户体验的 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>