html
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=375,?user-scalable=no">
????<title>Document</title>
????<link?rel="stylesheet"?href="./style.css">
????<script?src="./Xys.js"></script>
</head>
<body>
????<div?class="main">
????????<div?class="header">
????????????<div?class="logo">XXX</div>
????????????<input?type="text"?name=""?id="input"?placeholder="添加事項(xiàng)">
????????</div>
????????<div?class="doing?todo">
????????????<h3><span?class="title">正在進(jìn)行</span><span?class="num?doingnum">0</span></h3>
????????????<div?class="list?nlist">
????????????</div>
????????</div>
????????<div?class="done?todo">
????????????<h3><span?class="title">已經(jīng)完成</span><span?class="num?donenum"></span></h3>
????????????<div?class="list?olist">
????????????</div>
????????</div>
????</div>
????<script>
????????var?inputDom?=?document.querySelector('#input')
????????var?doingListDiv?=?document.querySelector('.nlist')
????????var?doneListDiv?=?document.querySelector('.olist')
????????var?mainDiv?=?document.querySelector('.main')
????????var?doingnum?=?document.querySelector('.doingnum')
????????var?donenum?=?document.querySelector('.donenum')
????????????//?console.log(doingListDiv.length)
????????if?(localStorage.listStr?==?undefined)?{
????????????var?listStr?=?[]
????????}?else?{
????????????var?listStr?=?JSON.parse(localStorage.listStr)
????????}
????????inputDom.onkeydown?=?function(event)?{
????????????//?console.log(event.key)
????????????if?(event.key?==?'Enter')?{
????????????????//?console.log(inputDom.value)
????????????????var?obj?=?{
????????????????????content:?inputDom.value,
????????????????????isDone:?false
????????????????}
????????????????listStr.push(obj)
????????????????????//?console.log(listStr)
????????????????render(listStr)
????????????}
????????}
????????function?render(listStr)?{
????????????var?num?=?[0,?0]
????????????listStr.forEach(element?=>?{
????????????????if?(element.isDone?==?true)?{
????????????????????num[0]++
????????????????}?else?{
????????????????????num[1]++
????????????????}
????????????});
????????????console.log(num)
????????????doingnum.innerHTML?=?num[1]
????????????donenum.innerHTML?=?num[0]
????????????localStorage.listStr?=?JSON.stringify(listStr)
????????????doingListDiv.innerHTML?=?''
????????????doneListDiv.innerHTML?=?''
????????????listStr.forEach((element,?index)?=>?{
????????????????console.log(element)
????????????????var?todoItem?=?document.createElement('div')
????????????????todoItem.className?=?'todoItem'
????????????????if?(element.isDone)?{
????????????????????todoItem.innerHTML?=?`
????????????????????<input?type="checkbox"?checked?data-index="${index}">
????????????????????<div?class="content">`?+?element.content?+?`</div>
????????????????????<div?class="del"?data-index=${index}">刪除</div>`
????????????????????????//?console.log(doingListDiv)
????????????????????doneListDiv.appendChild(todoItem)
????????????????????????//?console.log(todoItem)
????????????????}?else?{
????????????????????todoItem.innerHTML?=?`
????????????????????<input?type="checkbox"?data-index="${index}">
????????????????????<div?class="content">`?+?element.content?+?`</div>
????????????????????<div?class="del"?data-index="${index}">刪除</div>`
????????????????????????//?console.log(doingListDiv)
????????????????????doingListDiv.appendChild(todoItem)
????????????????????????//?console.log(todoItem)
????????????????}
????????????????inputDom.value?=?''
????????????});
????????}
????????render(listStr)
????????doingListDiv.onchange?=?(e)?=>?{
????????????//?console.log(e.target.dataset.index)
????????????var?index?=?e.target.dataset.index
????????????listStr[index].isDone?=?true
????????????render(listStr)
????????}
????????doneListDiv.onchange?=?(e)?=>?{
????????????//?console.log(e.target.dataset.index)
????????????var?index?=?e.target.dataset.index
????????????listStr[index].isDone?=?false
????????????render(listStr)
????????}
????????mainDiv.onclick?=?(e)?=>?{
????????????var?index?=?e.target.dataset.index
????????????if?(e.target.className?==?'del')?{
????????????????listStr.splice(index,?1)
????????????????render(listStr)
????????????}
????????????//?render(listStr)
????????}
????</script>
</body>
</html>
style.css
*?{
????padding:?0;
????margin:?0;
????box-sizing:?border-box;
}
body?{
????background-color:?#cccccc;
????font-size:?16px;
}
.main?{
????width:?3.75rem;
}
.header?{
????width:?3.75rem;
????height:?0.5rem;
????background-color:?rgba(47,?47,?47,?.98);
????display:?flex;
????justify-content:?space-between;
????align-items:?center;
}
.header?.logo?{
????width:?0.8rem;
????height:?0.5rem;
????text-align:?center;
????line-height:?0.5rem;
????color:?#fff;
????font-size:?0.25rem;
????font-weight:?900;
}
.header>input?{
????width:?2.2rem;
????height:?0.3rem;
????margin:?0?0.1rem;
????border-radius:?0.08rem;
????border:?none;
????outline:?none;
}
.todo?h3?{
????height:?0.6rem;
????display:?flex;
????justify-content:?space-between;
????align-items:?center;
????padding:?0.1rem;
????line-height:?0.6rem;
}
.todo?.list?{
????padding:?0?0.15rem;
}
.todoItem?{
????display:?flex;
????width:?3.5rem;
????height:?0.38rem;
????align-items:?center;
????background-color:?#fff;
????border-radius:?0.04rem;
}
.todoItem::before?{
????content:?"";
????width:?0.05rem;
????height:?0.38rem;
????background-color:?deepskyblue;
}
.todoItem>input?{
????width:?0.22rem;
????height:?0.22rem;
????margin:?0?0.15rem;
}
.todoItem?.content?{
????width:?2.65rem;
}
.todoItem?.del?{
????background-color:?red;
????width:?0.45rem;
????height:?0.22rem;
????/*?color:?red;?*/
????font-size:?0.13rem;
????text-align:?center;
????line-height:?0.22rem;
????border-radius:?0.08rem;
????margin:?0?0.08rem;
????color:?#fff;
}
.done?.todoItem?{
????background-color:?#bbbbbb
}
.pc?{
????font-size:?200px?!important;
}
.pc?.main?{
????margin:?0?auto;
}
Xys.js
(function()?{
????function?Xys()?{
????????var?userAgent?=?navigator.userAgent
????????var?html?=?document.querySelector('html')
????????html.className?=?''
????????if?(userAgent.indexOf('iPhone')?!=?-1)?{
????????????html.classList.add('iPhone')
????????}?else?if?(userAgent.indexOf('Android')?!=?-1)?{
????????????html.classList.add('Android')
????????}?else?if?(userAgent.indexOf("iPad")?!=?-1)?{
????????????html.classList.add('iPad')
????????}?else?{
????????????html.classList.add('pc')
????????}
????????if?(window.innerWidth?<?640)?{
????????????html.classList.add('lt640')
????????????html.classList.add('lt960')
????????????html.classList.add('lt1200')
????????}?else?if?(window.innerWidth?<?960)?{
????????????html.classList.add('gt640')
????????????html.classList.add('lt960')
????????????html.classList.add('lt1200')
????????}?else?if?(window.innerWidth?<?1200)?{
????????????html.classList.add('gt640')
????????????html.classList.add('gt960')
????????????html.classList.add('lt1200')
????????}?else?{
????????????html.classList.add('gt640')
????????????html.classList.add('gt960')
????????????html.classList.add('gt1200')
????????}
????????//rem布局
????????var?screenw?=?window.innerWidth
????????var?danwei?=?screenw?/?3.75
????????html.style.fontSize?=?danwei?+?'px'
????}
????Xys()
????window.onresize?=?()?=>?{
????????Xys()
????}
})()
