JavaScript网页设计案例

JavaScript 在网页设计中扮演着至关重要的角色,它能够实现动态效果、用户交互、数据验证等多种功能。下面,我将提供一个简单的 JavaScript 网页设计案例,该案例将创建一个基本的待办事项列表(Todo List),用户可以添加、删除和标记待办事项为已完成。

HTML 结构

首先,我们需要创建一个 HTML 页面来作为用户界面。

html 复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Todo List</title>  
<link rel="stylesheet" href="style.css">  
</head>  
<body>  
<h1>待办事项列表</h1>  
<input type="text" id="todoInput" placeholder="添加新的待办事项...">  
<button onclick="addTodo()">添加</button>  
<ul id="todoList">  
    <!-- 待办事项将在这里动态添加 -->  
</ul>  
  
<script src="script.js"></script>  
</body>  
</html>

CSS 样式

接着,我们添加一些基本的 CSS 来美化界面。

css 复制代码
/* style.css */  
body {  
    font-family: Arial, sans-serif;  
    margin: 40px;  
    line-height: 1.6;  
}  
  
#todoList {  
    list-style-type: none;  
    padding: 0;  
}  
  
#todoList li {  
    margin-bottom: 10px;  
    padding: 10px;  
    background-color: #f4f4f4;  
    border: 1px solid #ddd;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
}  
  
#todoList li.completed {  
    text-decoration: line-through;  
    background-color: #d4edda;  
}  
  
.delete-btn {  
    cursor: pointer;  
    color: red;  
}

JavaScript 功能

最后,我们使用 JavaScript 来添加动态功能

javascript 复制代码
// script.js  
function addTodo() {  
    const input = document.getElementById('todoInput');  
    const list = document.getElementById('todoList');  
    const itemText = input.value.trim();  
  
    if (itemText) {  
        const itemElement = document.createElement('li');  
        itemElement.textContent = itemText;  
  
        const deleteBtn = document.createElement('button');  
        deleteBtn.textContent = '删除';  
        deleteBtn.className = 'delete-btn';  
        deleteBtn.onclick = function() {  
            this.parentElement.remove();  
        };  
  
        const toggleBtn = document.createElement('button');  
        toggleBtn.textContent = '完成';  
        toggleBtn.onclick = function() {  
            const item = this.parentElement;  
            item.classList.toggle('completed');  
            this.textContent = item.classList.contains('completed') ? '未完成' : '完成';  
        };  
  
        itemElement.appendChild(toggleBtn);  
        itemElement.appendChild(document.createTextNode(' ')); // 添加一些间隔  
        itemElement.appendChild(deleteBtn);  
  
        list.appendChild(itemElement);  
  
        input.value = ''; // 清空输入框  
    }  
}

总结

这个简单的待办事项列表案例展示了 JavaScript 如何与 HTML 和 CSS 协作来创建动态、交互式的网页。用户可以在输入框中输入待办事项,点击"添加"按钮将其添加到列表中,点击"删除"按钮可以删除某个待办事项,点击"完成"按钮可以标记待办事项为已完成。你可以在这个基础上进一步扩展功能,比如添加待办事项的持久化存储、日期提醒等。

相关推荐
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠7 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机7 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子7 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪7 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
qp7 小时前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
烛阴8 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript