• ToDoList——原生JavaScript（超详细）

    目录

    一、效果展示

    二、ToDoList——css样式

    三、ToDoList——html内容

    四、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内容

     

    1. html>
    2. <html>
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    6.     <title>ToDoList—最简单的待办事项列表title>
    7.     <meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" />
    8.     <link rel="stylesheet" href="./index.css">
    9. head>
    10. <body>
    11.     <header>
    12.         <section>
    13.             <form action="" id="form" onclick="">
    14.                 <label for="title">ToDoListlabel>
    15.                 <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
    16.                     autocomplete="off" />
    17.             form>
    18.         section>
    19.     header>
    20.     <section>
    21.         <h2>正在进行 <span id="todocount">span>h2>
    22.         <ol id="todolist" class="demo-box">
    23.         ol>
    24.         <h2>已经完成 <span id="donecount">span>h2>
    25.         <ul id="donelist">
    26.         ul>
    27.     section>
    28.     <footer>
    29.         Copyright © 2014 todolist.cn <a href="javascript:clear();">cleara>
    30.     footer>
    31.     <script type="text/javascript" src="./index.js">script>
    32. body>
    33. html>

     

    四、ToDoList——JavaScript部分
       

    1. //获取元素
    2. var title = document.querySelector('#title');
    3. var ol = document.querySelector('#todolist');
    4. var ul = document.querySelector('#donelist');
    5. load();
    6.  
    7. //键盘点击事件
    8. title.addEventListener('keydown', function (e) {
    9.     var arr = getData(); //再获取数据的基础上拿到数组
    10.     if (e.keyCode == 13) {
    11.         var todo = {
    12.             title: title.value, //把表单值赋给title
    13.             done: false, //后面上下数据交换使用
    14.         }
    15.         arr.push(todo); //把数据放到数组中
    16.         // console.log(arr);
    17.         saveData(arr); //存储数据
    18.         var form = document.querySelector('#form'); //让表单返回默认值
    19.         form.reset();
    20.         load();
    21.     }
    22. })
    23.  
    24. //获取数据
    25. function getData() {
    26.     var data = window.localStorage.getItem('todo'); //得到todo中存储的数据
    27.     if (data != null) {
    28.         return JSON.parse(data); //数据转化类数组，对象
    29.     } else {
    30.         return [];
    31.     }
    32. }
    33.  
    34. //存储数据
    35. function saveData(tdlist) {
    36.     window.localStorage.setItem('todo', JSON.stringify(tdlist)); //存储数据和将数组转化为字符串
    37. }
    38.  
    39. //显示数据
    40. function load() {
    41.     var todoCount = document.querySelector('#todocount');
    42.     var doneCount = document.querySelector('#donecount');
    43.     var todocount = 0;
    44.     var donecount = 0;
    45.  
    46.     //删除节点
    47.     var olchilds = ol.childNodes;    //ol全部子节点
    48.     for (var i = olchilds.length - 1; i >= 0; i--) {
    49.         ol.removeChild(olchilds[i]);
    50.     }
    51.     var ulchilds = ul.childNodes;
    52.     for (var i = ulchilds.length - 1; i >= 0; i--) {
    53.         ul.removeChild(ulchilds[i]);
    54.     }
    55.  
    56.  
    57.     var data = getData();   //获取之前数据
    58.     data.forEach((item, index) => {    //遍历data
    59.         var li = document.createElement('li');     //创建li节点
    60.         li.innerHTML = `
      ${index}">${item.title}
      ${index}      ">` //通过拼接填写内容
    61.         if (item.done) {    //为实现数据数量
    62.            ul.insertBefore(li, ul.children[0]);//在ul前添加数据让输入数据从第一个开始输入
    63.            li.children[0].checked = 'checked'   //ul里的li默认选中
    64.             donecount++;                         //每执行一次加一
    65.         } else {
    66.            ol.insertBefore(li, ol.children[0]);//在ol前添加数据让输入数据从第一个开始输入
    67.             todocount++;                          //每执行一次加一
    68.         }
    69.     });
    70.     todoCount.innerText = todocount;        //将次数输出到页面
    71.     doneCount.innerText = donecount;
    72. }
    73. //编辑数据
    74. function edit() {
    75.     ol.addEventListener('click', function (e) {     //表单内容的输入点击事件
    76.         var p = e.target;                           //e.target点击结果为每个的属性（INPUT,P...）
    77.         // console.log(p.nodeName);
    78.         if (p.nodeName == 'P') {                   //寻找P的点击的元素
    79.             p.innerHTML = `${p.innerText}" id="input${p.id}"/>`; //给P添加内容
    80.             // p.children[0].select();    
    81.             p.children[0].addEventListener('blur', function () {   //失焦
    82.                 var data = getData();                 //获取数据
    83.                 var i = p.id.substring(1);            //截取字符串 原p1 => p
    84.                 data[i].title = this.value;           //赋值
    85.                 saveData(data);                       //存储
    86.                 load();                               //页面显示
    87.             })
    88.         }
    89.     })
    90. }
    91. edit();
    92.  
    93. //删除数据
    94. function remove() {
    95.     ol.addEventListener('click', function (e) {      //ol的点击事件
    96.         var a = e.target;                           //与上部分同理
    97.         if (a.nodeName == 'A') {                    //选取A
    98.             var i = a.id;                           
    99.             var data = getData();                  //拿取数据
    100.             data.splice(i, 1);                    //删除数据
    101.             saveData(data);                       //存储
    102.             load();                               //页面显示
    103.         }
    104.  
    105.     })
    106. }
    107. remove();
    108.  
    109. //切换数据
    110. function change() {
    111.     ol.addEventListener('click', function (e) {           //点击input表单前面的选项
    112.         var input = e.target;
    113.         if (input.nodeName == 'INPUT') {
    114.             var i = input.nextElementSibling.nextElementSibling.id;    //获取点击的id
    115.             var data = getData();                                       //拿取数据
    116.                 data[i].done = true;                                  //切换
    117.                 saveData(data);                                      
    118.                 load();
    119.         }
    120.     })
    121.     ul.addEventListener('click', function (e) {
    122.         var input = e.target;
    123.         if (input.nodeName == 'INPUT') {
    124.             var i = input.nextElementSibling.nextElementSibling.id;
    125.             var data = getData();
    126.                 data[i].done = false;
    127.                 saveData(data);
    128.                 load();
    129.         }
    130.     })
    131. }
    132. change();

     

     

  • 相关阅读:
    2024 CISCN WEB 部分wp
    SQL数据库添加新账号，只操作指定数据库
    [极客大挑战 2019]RCE ME 1
    申请软件著作权的流程
    B+tree - B+树深度解析+C语言实现+opencv绘图助解
    【SLAM中的问题相关解决方案】
    分布式多主关系数据库的底线业务优势
    js input手机号正则限制11位数字
    LeetCode 2562. 找出数组的串联值【数组,相向双指针】1259
    Stable Diffusion - 配置 WebUI 升级至 v1.6.0 版本与 VirtualENV 环境配置
  • 原文地址：https://blog.csdn.net/qq_65715980/article/details/126122507