JavaScript网页设计案例

以下是一个使用 JavaScript 进行网页设计的简单案例:

一、案例介绍

这个案例是一个简单的待办事项列表应用。用户可以在输入框中输入待办事项,点击"添加"按钮将其添加到列表中。每个待办事项旁边有一个"完成"按钮和一个"删除"按钮,用户可以点击"完成"按钮将待办事项标记为已完成,点击"删除"按钮将其从列表中删除。

二、HTML 结构

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>待办事项列表</h1>
    <input type="text" id="todoInput" placeholder="输入待办事项">
    <button id="addButton">添加</button>
    <ul id="todoList"></ul>
    <script src="script.js"></script>
</body>

</html>

三、CSS 样式(styles.css)

css 复制代码
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
}

input[type="text"] {
    padding: 10px;
    width: 300px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #fff;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button.completeButton {
    background-color: #2196F3;
}

button.deleteButton {
    background-color: #f44336;
}

四、JavaScript 功能实现(script.js)

javascript 复制代码
// 获取 DOM 元素
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');

// 添加待办事项
addButton.addEventListener('click', () => {
    const todoText = todoInput.value.trim();
    if (todoText!== '') {
        const li = document.createElement('li');
        li.textContent = todoText;
        const completeButton = document.createElement('button');
        completeButton.textContent = '完成';
        completeButton.classList.add('completeButton');
        completeButton.addEventListener('click', () => {
            li.classList.toggle('completed');
        });
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.classList.add('deleteButton');
        deleteButton.addEventListener('click', () => {
            todoList.removeChild(li);
        });
        li.appendChild(completeButton);
        li.appendChild(deleteButton);
        todoList.appendChild(li);
        todoInput.value = '';
    }
});

在这个案例中,我们使用了 HTML、CSS 和 JavaScript 来创建一个简单的待办事项列表应用。通过 JavaScript,我们实现了添加待办事项、标记为完成和删除待办事项的功能。你可以根据自己的需求进一步扩展和改进这个应用,例如添加本地存储功能,以便在页面刷新后仍然保留待办事项列表。

相关推荐
LoveDreaMing2 分钟前
微前端-无界的实操和源码分析
前端·javascript·架构
修炼前端秘籍的小帅6 分钟前
精读《JavaScript 高级程序设计 第4版》第6章 集合引用类型(三)Map、WeakMap、Set、WeakSet
开发语言·javascript·ecmascript
十八朵郁金香26 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
拉不动的猪36 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
南清的coding日记1 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
yoyoma1 小时前
object 、 map 、weakmap区别
前端·javascript
shyshi1 小时前
vercel 部署 node 服务和解决 vercel 不可访问的问题
前端·javascript
.生产的驴1 小时前
React 模块化Axios封装请求 统一响应格式 请求统一处理
前端·javascript·react.js·前端框架·json·ecmascript·html5
雾岛听风来1 小时前
Android开发中常用高效数据结构
前端·javascript·后端
思考着亮3 小时前
formData
javascript