当前位置：网站首页>Todolist incomplete, completed

Todolist incomplete, completed

2022-06-26 03:22:00 【Small vegetable bird yard live】 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>storage</title>
</head>
<body>
    <input type="text" required id="inp">
    <h2> Hang in the air <span id="num">0</span></h2>
    <ul id="list">

    </ul>
    <h2> Completed </h2>
    <ul id="com">

    </ul>
    <script>
        var inp = document.getElementById('inp');
        var list = document.getElementById('list');
        var com = document.getElementById('com');
        if(localStorage.getItem('data')){
            var todo = localStorage.getItem('data');
            var arr = JSON.parse(todo);
            var arr1 = [];
        }else{
            var arr = [];
            var arr1 = [];
        }
        function init(){
            list.innerHTML = '';
            for(var i=0;i<arr.length;i++){
                list.innerHTML += '<li index='+i+'><input type="checkbox">'+arr[i]+'<button> Delete </button></li>'
            }// Encapsulate a function 
        }
        init();
        inp.onkeydown = function(e){
            if(e.keyCode === 13){
                arr.push(inp.value);
                num.innerHTML = arr.length;
                localStorage.setItem('data',JSON.stringify(arr));
                list.innerHTML += '<li><input type="checkbox">'+inp.value+'<button> Delete </button></li>'
            }
        }
        list.onclick = function(e){
            if(e.target.nodeName==='INPUT'){
                var idx = e.target.parentNode.getAttribute('index');
                var last = arr.splice(idx,1)[0];
                num.innerHTML = arr.length;
                arr1.push(last);
                // list.removeChild(e.target.parentNode);
                init();
                com.innerHTML += '<li><input checked type="checkbox">'+last+'<button> Delete </button></li>'
            }
            if(e.target.nodeName==='BUTTON'){
                var idx = e.target.parentNode.getAttribute('index');
                var last = arr.splice(idx,1)[0];
                init();
            }
        }
        // var arr = {name:123};
        // localStorage.setItem('name',JSON.stringify(arr));
        // var obj = JSON.parse(localStorage.getItem('name'));
        // console.log(obj);
        // localStorage.setItem('name','zhangsan');
    </script>
</body>
</html>

Insert picture description here

原网站

版权声明
本文为[Small vegetable bird yard live]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206260249289178.html

边栏推荐

猜你喜欢

随机推荐