javascript网页设计案例

最新推荐文章于 2024-11-07 13:38:59 发布

热爱分享的博士僧

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量752

点赞数 24

文章标签： javascript

本文链接：https://blog.csdn.net/2403_86762465/article/details/141757111

版权

JavaScript 是 Web 开发中不可或缺的一部分，它可以让网页变得更加动态和交互。下面是一个简单的 JavaScript 网页设计案例，演示如何使用 JavaScript 来创建一个动态的计数器应用。

示例：动态计数器应用

这个示例将展示如何使用 HTML、CSS 和 JavaScript 创建一个简单的计数器，用户可以增加或减少计数器的数值，并且可以重置计数器。

1. HTML 结构

首先，我们需要定义页面的基本结构。

html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Dynamic Counter</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="counter">
11        <button id="decrease">-</button>
12        <span id="count">0</span>
13        <button id="increase">+</button>
14        <button id="reset">Reset</button>
15    </div>
16
17    <script src="script.js"></script>
18</body>
19</html>

2. CSS 样式

接下来，我们添加一些基本的样式来美化我们的计数器。

css

深色版本

1/* styles.css */
2body {
3    display: flex;
4    justify-content: center;
5    align-items: center;
6    height: 100vh;
7    margin: 0;
8    background-color: #f4f4f4;
9}
10
11.counter {
12    display: flex;
13    gap: 10px;
14    font-size: 24px;
15    padding: 20px;
16    border: 1px solid #ccc;
17    background-color: white;
18    border-radius: 5px;
19}
20
21button {
22    padding: 10px 20px;
23    font-size: 24px;
24    cursor: pointer;
25    border: none;
26    border-radius: 5px;
27}
28
29#increase {
30    background-color: #28a745;
31    color: white;
32}
33
34#decrease {
35    background-color: #dc3545;
36    color: white;
37}
38
39#reset {
40    background-color: #6c757d;
41    color: white;
42}

3. JavaScript 逻辑

最后，我们编写 JavaScript 代码来实现计数器的功能。

javascript

深色版本

1// script.js
2document.addEventListener('DOMContentLoaded', function() {
3    const countElement = document.getElementById('count');
4    let count = parseInt(countElement.textContent);
5
6    document.getElementById('increase').addEventListener('click', () => {
7        count++;
8        countElement.textContent = count;
9    });
10
11    document.getElementById('decrease').addEventListener('click', () => {
12        count--;
13        countElement.textContent = count;
14    });
15
16    document.getElementById('reset').addEventListener('click', () => {
17        count = 0;
18        countElement.textContent = count;
19    });
20});