</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>
|
