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="添加事项">
</div>
<div class="doing todo">
<h3><span class="title">正在进行</span><span class="num doingnum">0</span></h3>
<div class="list nlist">
</div>
</div>
<div class="done todo">
<h3><span class="title">已经完成</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()
}
})()
