soho建设外贸网站,中铁建设集团招聘官网,做数学题的网站有吗,网站备案拍照背景幕布下面是一个简单的 JavaScript 网页设计案例#xff0c;展示了如何使用 HTML、CSS 和 JavaScript 创建一个动态的网页。
案例#xff1a;简单的待办事项列表
1. HTML 部分
!DOCTYPE html
html langzh
headmeta charsetUTF-8… 下面是一个简单的 JavaScript 网页设计案例展示了如何使用 HTML、CSS 和 JavaScript 创建一个动态的网页。
案例简单的待办事项列表
1. HTML 部分
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title待办事项列表/titlelink relstylesheet hrefstyles.css
/head
bodydiv classcontainerh1我的待办事项/h1input typetext idtaskInput placeholder添加新任务...button idaddTaskButton添加任务/buttonul idtaskList/ul/divscript srcscript.js/script
/body
/html2. CSS 部分 (styles.css)
body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;
}.container {max-width: 400px;margin: auto;background: white;padding: 20px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}h1 {text-align: center;
}input {width: calc(100% - 22px);padding: 10px;margin-bottom: 10px;
}button {width: 100%;padding: 10px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #218838;
}ul {list-style-type: none;padding: 0;
}li {padding: 10px;border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;
}li button {background-color: #dc3545;border: none;color: white;cursor: pointer;
}li button:hover {background-color: #c82333;
}3. JavaScript 部分 (script.js)
document.getElementById(addTaskButton).addEventListener(click, function() {const taskInput document.getElementById(taskInput);const taskValue taskInput.value.trim();if (taskValue) {const taskList document.getElementById(taskList);const li document.createElement(li);li.textContent taskValue;const deleteButton document.createElement(button);deleteButton.textContent 删除;deleteButton.addEventListener(click, function() {taskList.removeChild(li);});li.appendChild(deleteButton);taskList.appendChild(li);taskInput.value ;} else {alert(请输入任务内容);}
});功能描述
输入框用户可以在输入框中输入待办事项。添加按钮点击按钮后会将输入的事项添加到列表中。删除按钮每个待办事项后面都有一个“删除”按钮点击后可以删除该事项。
如何使用
将上面的代码分别保存为 index.html、styles.css 和 script.js 文件。确保它们在同一文件夹中。用浏览器打开 index.html即可体验待办事项列表的功能。
