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

javascript网页设计案例

article 2024/11/18 2:22:50

以下是一些使用 JavaScript 进行网页设计的案例，这些案例展示了 JavaScript 在前端开发中的强大功能和灵活性。每个案例都包含了基本的实现思路和代码示例。

图片画廊（Image Gallery）

功能：展示一组图片，并支持点击放大查看。
实现思路：

使用 HTML 和 CSS 创建图片网格。
使用 JavaScript 处理图片点击事件，显示放大的图片。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Image Gallery</title>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <div id="modal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImg">
    </div>

    <script>
        const images = document.querySelectorAll('.gallery img');
        const modal = document.getElementById('modal');
        const modalImg = document.getElementById('modalImg');
        const close = document.querySelector('.close');

        images.forEach(image => {
            image.onclick = function() {
                modal.style.display = 'block';
                modalImg.src = this.src;
            }
        });

        close.onclick = function() {
            modal.style.display = 'none';
        }
    </script>
</body>
</html>

简易待办事项列表（To-Do List）

功能：添加、删除和标记待办事项。
实现思路：

使用输入框和按钮添加待办事项。
使用 JavaScript 管理待办事项的增删改查。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        ul {
            list-style-type: none;
        }
        li.completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task">
    <button id="addTask">Add</button>
    <ul id="taskList"></ul>

    <script>
        const taskInput = document.getElementById('taskInput');
        const addTaskButton = document.getElementById('addTask');
        const taskList = document.getElementById('taskList');

        addTaskButton.onclick = function() {
            const taskText = taskInput.value;
            if (taskText) {
                const li = document.createElement('li');
                li.textContent = taskText;
                li.onclick = function() {
                    this.classList.toggle('completed');
                };
                taskList.appendChild(li);
                taskInput.value = '';
            }
        };
    </script>
</body>
</html>

简易天气应用（Weather App）

功能：获取并显示天气信息。
实现思路：

使用天气 API 获取实时天气数据。
使用 JavaScript 动态更新页面内容。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
</head>
<body>
    <h1>Weather App</h1>
    <input type="text" id="cityInput" placeholder="Enter city">
    <button id="getWeather">Get Weather</button>
    <div id="weatherResult"></div>

    <script>
        const apiKey = 'YOUR_API_KEY'; // 替换为你的 API 密钥
        const getWeatherButton = document.getElementById('getWeather');
        const weatherResult = document.getElementById('weatherResult');

        getWeatherButton.onclick = function() {
            const city = document.getElementById('cityInput').value;
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
                .then(response => response.json())
                .then(data => {
                    const temp = data.main.temp;
                    const weatherDescription = data.weather[0].description;
                    weatherResult.innerHTML = `Temperature: ${temp}°C<br>Description: ${weatherDescription}`;
                })
                .catch(error => {
                    weatherResult.innerHTML = 'City not found.';
                });
        };
    </script>
</body>
</html>

简易计时器（Timer）

功能：实现一个简单的计时器，可以开始、暂停和重置。
实现思路：

使用 setInterval 和 clearInterval 控制时间。
使用 HTML 和 CSS 显示时间。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer</title>
</head>
<body>
    <h1>Timer</h1>
    <div id="time">00:00</div>
    <button id="start">Start</button>
    <button id="pause">Pause</button>
    <button id="reset">Reset</button>

    <script>
        let timer;
        let seconds = 0;

        function updateTime() {
            const minutes = Math.floor(seconds / 60);
            const secs = seconds % 60;
            document.getElementById('time').textContent = 
                `${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        }

        document.getElementById('start').onclick = function() {
            clearInterval(timer);
            timer = setInterval(() => {
                seconds++;
                updateTime();
            }, 1000);
        };

        document.getElementById('pause').onclick = function() {
            clearInterval(timer);
        };

        document.getElementById('reset').onclick = function() {
            clearInterval(timer);
            seconds = 0;
            updateTime();
        };
    </script>
</body>
</html>