html任务清单源码,JavaScript jQuery 任务清单 ToDoList

最新推荐文章于 2021-08-08 23:46:41 发布

105菌

最新推荐文章于 2021-08-08 23:46:41 发布

阅读量553

点赞数

文章标签： html任务清单源码

这篇博客介绍了如何用HTML、CSS和JavaScript实现一个简单的ToDoList应用。用户可以输入待办事项，完成后可以标记为完成。代码包括了页面结构、样式和交互逻辑，所有数据通过本地存储进行持久化。当页面加载时，会自动渲染存储的待办事项。此外，提供了删除和切换任务状态的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实现：

ToDoList.html(复制并保存为html文件，打开即可见效果)：

<!DOCTYPE html>

<html>

<head>

<title>ToDoList—最简单的待办事项列表</title>

</head>

<body>

<label for="title">ToDoList</label>

</section>

</header>

</ol>

<hr>

</ul>

</section>

</body>

</html>

ToDoList.css：

body {

margin: 0;

padding: 0;

font-size: 16px;

background: #CDCDCD;

}

header {

height: 50px;

background: #333;

background: rgba(47, 47, 47, 0.98);

}

section {

margin: 0 auto;

}

label {

float: left;

width: 100px;

line-height: 50px;

color: #DDD;

font-size: 24px;

cursor: pointer;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

header input {

float: right;

width: 60%;

height: 24px;

margin-top: 12px;

text-indent: 10px;

border-radius: 5px;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;

border: none

}

input:focus {

outline-width: 0

}

h2 {

position: relative;

}

span {

position: absolute;

top: 2px;

right: 5px;

display: inline-block;

padding: 0 5px;

height: 20px;

border-radius: 20px;

background: #E6E6FA;

line-height: 22px;

text-align: center;

color: #666;

font-size: 14px;

}

ol,

ul {

padding: 0;

list-style: none;

}

li input {

position: absolute;

top: 2px;

left: 10px;

width: 22px;

height: 22px;

cursor: pointer;

}

p {

margin: 0;

}

li p input {

top: 3px;

left: 40px;

width: 70%;

height: 20px;

line-height: 14px;

text-indent: 5px;

font-size: 14px;

}

li {

height: 32px;

line-height: 32px;

background: #fff;

position: relative;

margin-bottom: 10px;

padding: 0 45px;

border-radius: 3px;

border-left: 5px solid #629A9C;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);

}

ol li {

cursor: move;

}

ul li {

border-left: 5px solid #999;

opacity: 0.5;

}

li a {

position: absolute;

top: 2px;

right: 5px;

display: inline-block;

width: 14px;

height: 12px;

border-radius: 14px;

border: 6px double #FFF;

background: #CCC;

line-height: 14px;

text-align: center;

color: #FFF;

font-weight: bold;

font-size: 14px;

cursor: pointer;

}

footer {

color: #666;

font-size: 14px;

text-align: center;

}

footer a {

color: #666;

text-decoration: none;

color: #999;

}

@media screen and (max-device-width: 620px) {

section {

width: 96%;

padding: 0 2%;

}

@media screen and (min-width: 620px) {

section {

width: 600px;

padding: 0 10px;

}

ToDoList.js

$(function() {

// 页面每次加载，就自动渲染一次数据

load();

$("#title").on("keydown", function(event) {

// 判断用户按下了回车键(13)

if (event.keyCode == 13) {

if ($(this).val() == "") {

alert("请输入待办事项！");

} else {

// 先读取本地存取原来的数据

var local = getData();

// 把最新的数据追加给local

local.push({ title: $(this).val(), done: false });

// 把local存到本地存储

saveData(local);

load();

// 加载完毕后删除input中的文本

$(this).val("");

}

});

//删除操作

$("ol,ul").on("click", "a", function() {

// 获取本地存储

var data = getData();

// 修改数据

var index = $(this).attr("id");

// console.log(index);

// 元素.splice(从第几个位置开始删除，删除几个)

data.splice(index, 1);

// 保存到本地存储

saveData(data);

// 重新渲染页面

load();

});

// 正在进行、已经完成操作

$("ol,ul").on("click", "input", function() {

var data = getData();

var index = $(this).siblings("a").attr("id");

// console.log(index);

data[index].done = $(this).prop("checked");

saveData(data);

load();

});

// 读取本地存储的数据

function getData() {

var data = localStorage.getItem("todolist");

if (data !== null) {

// 本地存储的数据格式是字符串，需要转化成对象

return JSON.parse(data);

} else {

return [];

}

// 保存本地存储数据

function saveData(data) {

// 存储前要转化为字符串

localStorage.setItem("todolist", JSON.stringify(data));

}

// 渲染加载数据

function load() {

var data = getData();

// console.log(data);

// 遍历之前先清空ol和ul里的内容

$("ol,ul").empty();

var todoCount = 0; // 正在进行的个数

var doneCount = 0; // 已完成的个数

// 遍历数据data

$.each(data, function(i, n) {

// console.log(n);

// 追加数据，并创建自定义id索引号

if (n.done) {

$("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>");

doneCount++;

} else {

$("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>");

todoCount++;

}

});

// 修改显示的个数

$("#todocount").text(todoCount);

$("#donecount").text(doneCount);

}

});