雷盟-前端-20230111

1. <script>
   
2.         // 获取dom节点
   
3.         const time = document.querySelector('#time');
   
4.         const add = document.querySelector('#add');
   
5.         const work = document.querySelector('#work');
   
6.         const text = document.querySelector('#text');
   
7.         const ul1 = document.querySelector('#ul1');
   
8.         const ul2 = document.querySelector('#ul2');
   
9.         const lis = document.querySelectorAll('li');
   
10.         const ipt = document.querySelector('input');
    
11.         const laji = document.querySelector('.laji');
    
12.         const wanBtn = document.querySelector('#wanBtn');
    
13.         const set = document.querySelector('#set');
    
14.         const xuan = document.querySelector('.xuan');
    
15. 
    
16.         // 封装星期
    
17.         function getWeekDate(time = new Date()) {
    
18.             let weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
    
19.             let date = new Date(time);
    
20.             let day = date.getDay();
    
21.             return weeks[day];
    
22.         };
    
23.         // 封装日期
    
24.         function getMD(sep = "月") {
    
25.             let date = new Date();
    
26.             let m = date.getMonth() + 1;
    
27.             let d = date.getDay() + 8;
    
28.             return [m, d].join(sep);
    
29.         };
    
30.         // 将日期和星期渲染到time盒子里
    
31.         time.textContent = getMD() + "日" + " " + getWeekDate();
    
32. 
    
33.         // 给add盒子添加点击事件
    
34.         add.addEventListener('click', function () {
    
35.             bianji.style.display = "block";
    
36. 
    
37.         });
    
38.         let html="";
    
39.         var arr=JSON.parse(localStorage.getItem("history"))||[];
    
40.         var arr = [];
    
41.         wanBtn.addEventListener('click', function () {
    
42.             var li = document.createElement('li');
    
43.             ul1.innerHTML += ` <li>
    
44.                     <input type="checkbox" class="xuan">
    
45.                     <div id="text">${set.value}</div>
    
46.                     <span class="iconfont icon-lajitong laji"></span>
    
47.                 </li>
    
48. `;
    
49. 
    
50. // 将输入的内容添加到本地储存
    
51.             let iptVal = set.value;
    
52.             arr.push(iptVal);
    
53.             let arrStr = JSON.stringify(arr);
    
54.             localStorage.setItem('history', arrStr);
    
55. // 将输入框隐藏
    
56.             bianji.style.display = "none";
    
57.         });
    
58.         ul1.addEventListener('click', function (e) {
    
59.             if (e.target.className == "iconfont icon-lajitong laji") {
    
60.                 ul1.removeChild(e.target.parentNode);
    
61.                 console.log(11);
    
62.                 let iptVal =e.target.previousElementSibling.textContent;
    
63.             //arr.push(iptVal);
    
64.             //let arrStr = JSON.stringify(arr);
    
65.             localStorage.removeItem('history', iptVal);  
    
66. 
    
67.             } else if (e.target.className == "xuan") {
    
68.                 if (e.target.style.checked = "true") {
    
69.                     ul1.removeChild(e.target.parentNode);
    
70.                     ul2.appendChild(e.target.parentNode);
    
71.                 }
    
72.             }
    
73.         });
    
74. 
    
75.         ul2.addEventListener('click', function (e) {
    
76.             if (e.target.className == "iconfont icon-lajitong laji") {
    
77.                 ul2.removeChild(e.target.parentNode);
    
78.                 console.log(11);
    
79.                 let iptVal =e.target.previousElementSibling.textContent;
    
80.             // arr.push(iptVal);
    
81.             // let arrStr = JSON.stringify(arr);
    
82.             localStorage.removeItem('history', iptVal);  
    
83.             } else if (e.target.className == "xuan") {
    
84.                 if (e.target.style.checked = "false") {
    
85.                     ul2.removeChild(e.target.parentNode);
    
86.                     ul1.appendChild(e.target.parentNode);
    
87.                 }
    
88.             }
    
89.         });
    
90.     </script>

复制代码