网站开发一般流程图,凡科教育,php仿百度网站源码,重庆网站建设外包哪家好一个简单的JavaScript网页设计案例#xff0c;它将展示一个交互式的待办事项列表。用户可以添加新的待办事项#xff0c;并且能够通过点击来标记为已完成或删除它们。
HTML (index.html)
!DOCTYPE html
html langzh
headmeta char…一个简单的JavaScript网页设计案例它将展示一个交互式的待办事项列表。用户可以添加新的待办事项并且能够通过点击来标记为已完成或删除它们。
HTML (index.html)
!DOCTYPE html
html langzh
headmeta charsetUTF-8title待办事项列表/titlestylebody {font-family: Arial, sans-serif;}.todo-app {max-width: 500px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;}.todo-input {width: 100%;padding: 10px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 3px;}.todo-item {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;}.todo-item.completed {text-decoration: line-through;color: #aaa;}.btn-delete {background: none;border: none;cursor: pointer;color: red;}/style
/head
bodydiv classtodo-apph2我的待办事项/h2input typetext idnew-todo classtodo-input placeholder添加新任务...ul idtodo-list/ul/divscript srcapp.js/script
/body
/htmlJavaScript (app.js)
document.addEventListener(DOMContentLoaded, function() {const todoInput document.getElementById(new-todo);const todoList document.getElementById(todo-list);// 添加新待办事项todoInput.addEventListener(keypress, function(event) {if (event.key Enter todoInput.value.trim()) {addTodoItem(todoInput.value);todoInput.value ; // 清空输入框}});// 添加待办事项到列表function addTodoItem(text) {const item document.createElement(li);item.className todo-item;item.textContent text;const deleteButton document.createElement(button);deleteButton.className btn-delete;deleteButton.textContent ×;deleteButton.addEventListener(click, function() {todoList.removeChild(item);});item.appendChild(deleteButton);item.addEventListener(click, function() {item.classList.toggle(completed);});todoList.appendChild(item);}
});这个例子中包括了HTML、CSS和JavaScript代码。HTML部分定义了页面结构CSS用于样式设置而JavaScript则处理逻辑如添加待办事项、删除待办事项以及切换完成状态等。
