菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 孙科20230111 [打印本页]

作者: Sunke丶 时间: 2023-1-12 00:25
标题: 孙科20230111
</div>
<div class="mid2">
      <div class="yiwancheng">⬇已完成</div>
</div>

<div  class="mid3">

</div>
<div class="bot">
      <input type="text" placeholder="+ 添加任务,点击完成" class="ipt">
</div>

<script>
      var time = document.querySelector('.time');
      var wan=document.querySelector('.wan');
      var mid=document.querySelector('.mid');
      var mid2=document.querySelector('.mid2');
      var mid3=document.querySelector('.mid3');
   var cek=document.querySelector('.cek')
   var yiwancheng=document.querySelector('.yiwancheng')
      setInterval(function(){
         time.textContent=getTimes()
      });

      var ipt=document.querySelector('.ipt');
      ipt.addEventListener('click',function(){
         wan.style.display='block'
      });
      wan.addEventListener('click',function(){
         mid.innerHTML+=`<div class="box11"><input type="checkbox" class='cek'>${ipt.value}<div class="iconfont icon-shanchu"></div></div>`;
         wan.style.display='none';
         ipt.value=''
      });

   mid.addEventListener('click',function(e){
      // console.dir(e);
      if(e.target.className==='iconfont icon-shanchu'){
         mid.removeChild(e.target.parentNode)
      }else if(e.target.checked ==true){
         mid.removeChild(e.target.parentNode);
         mid3.appendChild(e.target.parentNode);

      }
   });
   mid3.addEventListener('click',function(e){
      console.dir(e.target);
      if(e.target.className==='iconfont icon-shanchu'){

      }else if(e.target.checked ==false){
         mid3.removeChild(e.target.parentNode);
         mid.appendChild(e.target.parentNode);
      }
   });
   yiwancheng.addEventListener('click',function(){
      console.log(mid2);
         if(yiwancheng.textContent=='⬇已完成'){
         yiwancheng.textContent='➡已完成';
         mid3.style.opacity='0'
         }else if(yiwancheng.textContent=='➡已完成'){
         yiwancheng.textContent='⬇已完成';
         mid3.style.opacity='1'

         }
   })

</script>

</body>

</html>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)