0
0

ToDoList——原生JavaScript（超详细）

一、效果展示

二、ToDoList——css样式

由于系统限制，所以只能把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——html内容

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" />
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <header>
        <section>
            <form action="" id="form" onclick="">
                <label for="title">ToDoList</label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                    autocomplete="off" />
            </form>
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
    </footer>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

四、ToDoList——JavaScript部分

//获取元素
var title = document.querySelector('#title');
var ol = document.querySelector('#todolist');
var ul = document.querySelector('#donelist');
load();

//键盘点击事件
title.addEventListener('keydown', function (e) {
    var arr = getData(); //再获取数据的基础上拿到数组
    if (e.keyCode == 13) {
        var todo = {
            title: title.value, //把表单值赋给title
            done: false, //后面上下数据交换使用
        }
        arr.push(todo); //把数据放到数组中
        // console.log(arr);
        saveData(arr); //存储数据
        var form = document.querySelector('#form'); //让表单返回默认值
        form.reset();
        load();
    }
})

//获取数据
function getData() {
    var data = window.localStorage.getItem('todo'); //得到todo中存储的数据
    if (data != null) {
        return JSON.parse(data); //数据转化类数组，对象
    } else {
        return [];
    }
}

//存储数据
function saveData(tdlist) {
    window.localStorage.setItem('todo', JSON.stringify(tdlist)); //存储数据和将数组转化为字符串
}

//显示数据
function load() {
    var todoCount = document.querySelector('#todocount');
    var doneCount = document.querySelector('#donecount');
    var todocount = 0;
    var donecount = 0;

    //删除节点
    var olchilds = ol.childNodes;    //ol全部子节点
    for (var i = olchilds.length - 1; i >= 0; i--) {
        ol.removeChild(olchilds[i]);
    }
    var ulchilds = ul.childNodes;
    for (var i = ulchilds.length - 1; i >= 0; i--) {
        ul.removeChild(ulchilds[i]);
    }

    var data = getData();   //获取之前数据
    data.forEach((item, index) => {    //遍历data
        var li = document.createElement('li');     //创建li节点
        li.innerHTML = `<input type = "checkbox"><p id = "p${index}">${item.title}</p><a href = "javascript:;" id="${index}"></a>` //通过拼接填写内容
        if (item.done) {    //为实现数据数量
           ul.insertBefore(li, ul.children[0]);//在ul前添加数据让输入数据从第一个开始输入
           li.children[0].checked = 'checked'   //ul里的li默认选中
            donecount++;                         //每执行一次加一
        } else {
           ol.insertBefore(li, ol.children[0]);//在ol前添加数据让输入数据从第一个开始输入
            todocount++;                          //每执行一次加一
        }
    });
    todoCount.innerText = todocount;        //将次数输出到页面
    doneCount.innerText = donecount;
}
//编辑数据
function edit() {
    ol.addEventListener('click', function (e) {     //表单内容的输入点击事件
        var p = e.target;                           //e.target点击结果为每个的属性（INPUT,P...）
        // console.log(p.nodeName);
        if (p.nodeName == 'P') {                   //寻找P的点击的元素
            p.innerHTML = `<input type="text" value="${p.innerText}" id="input${p.id}"/>`; //给P添加内容
            // p.children[0].select();    
            p.children[0].addEventListener('blur', function () {   //失焦
                var data = getData();                 //获取数据
                var i = p.id.substring(1);            //截取字符串 原p1 => p
                data[i].title = this.value;           //赋值
                saveData(data);                       //存储
                load();                               //页面显示
            })
        }
    })
}
edit();

//删除数据
function remove() {
    ol.addEventListener('click', function (e) {      //ol的点击事件
        var a = e.target;                           //与上部分同理
        if (a.nodeName == 'A') {                    //选取A
            var i = a.id;                           
            var data = getData();                  //拿取数据
            data.splice(i, 1);                    //删除数据
            saveData(data);                       //存储
            load();                               //页面显示
        }

    })
}
remove();

//切换数据
function change() {
    ol.addEventListener('click', function (e) {           //点击input表单前面的选项
        var input = e.target;
        if (input.nodeName == 'INPUT') {
            var i = input.nextElementSibling.nextElementSibling.id;    //获取点击的id
            var data = getData();                                       //拿取数据
                data[i].done = true;                                  //切换
                saveData(data);                                      
                load();
        }
    })
    ul.addEventListener('click', function (e) {
        var input = e.target;
        if (input.nodeName == 'INPUT') {
            var i = input.nextElementSibling.nextElementSibling.id;
            var data = getData();
                data[i].done = false;
                saveData(data);
                load();
        }
    })
}
change();
标签： 前端 html javascript
本文转载自: https://blog.csdn.net/qq_65715980/article/details/126122507
版权归原作者 青青草原小魔王 所有， 如有侵权，请联系我们删除。
登录后发布评论

“ToDoList&mdash;&mdash;原生JavaScript（超详细）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

双重锁定：零信任沙箱 完美的安全保障

企业网络安全人员必知的云原生安全

Linux——进程（上）

【Linux】centos7安装php7.4

CentOS9下载安装教程

Visual Studio（vs）下载安装C/C++运行环境配置和基本使用注意事项

Linux Vim教程（三）：插入模式与命令模式

文章导航