/* 修改所有图片的颜色为黑白 (100% 灰度) */
-webkit-filter: grayscale(100%);
/* Chrome, Safari, Opera */filter: grayscale(100%);

function resize () {// 1rem = 100pxvar designWidth = 750 // 设计稿的宽度var rootFontSize = 100 // 将html root的font-size设置为100pxdocument.documentElement.style.fontSize = rootFontSize + 'px'var width = document.documentElement.clientWidth // 屏幕尺寸var fontSize;fontSize = (width / designWidth) * rootFontSize // 模拟器上的实际字体大小
}window.onresize = resize // 屏幕尺寸大小变化时触发
document.addEventListener('DOMContentLoaded', resize, false) // 当浏览器解析完文档触发该事件

fontSize =(width / designWidth)* rootFontSize

var obj = {isChecked: false, // checkbox的状态是否选中content: value, // input的输入内容isDone: false // 是否完成}

    // 鼠标按下事件input.addEventListener('keydown', handleInput)// input事件function handleInput (e) {if (e.key === 'Enter') { // 敲回车执行事件var value = e.target.valuevar obj = {isChecked: false,content: value,isDone: false}dataList.push(obj)// 将数据存储到本地localStorage.setItem('toDoList', JSON.stringify(dataList));// 在这里渲染render()// 输入完毕后清除输入框的内容e.target.value = ''}}// 处理渲染页面函数function render () {// 渲染之前清空内容doingbox.innerHTML = ''donebox.innerHTML = ''// 判断是doing渲染还是done渲染dataList.forEach(function (item, index) {if (!item.isChecked) {// 创建一个元素var li = document.createElement('li')li.innerHTML = `<div class="item-left"><input type="checkbox" class="checkbox" data-index = "${index}"><span>${item.content}</span></div><button class="del" data-index = "${index}">删除</button>`// 插入一个元素doingbox.appendChild(li)li.className = 'doing-item'} else {// 创建一个元素var li = document.createElement('li')li.innerHTML = `<div class="item-left"><input type="checkbox" class="checkbox" checked="${item.isChecked}" data-index = "${index}"><span>${item.content}</span></div><button class="del" data-index = "${index}">删除</button>`// 插入一个元素donebox.appendChild(li)li.className = 'done-item'}})}

    // checkbox改变触发todobox.addEventListener('change', handleChangeEvent)// 处理change事件function handleChangeEvent (e) {var currentindex = e.target.dataset.indexdataList[currentindex].isChecked = 'checked'// render()dataList[currentindex].isDone = !dataList[currentindex].isDoneif (dataList[currentindex].isDone) { //已完成render()} else { // 未完成dataList[currentindex].isDone = false// 去除checked状态dataList[currentindex].isChecked = falserender()}// 将数据存储到本地localStorage.setItem('toDoList', JSON.stringify(dataList));}

    // 点击事件todobox.addEventListener('click', handleDel)// 处理删除功能function handleDel (e) {// 只有当元素为button时才执行删除操作if (e.target.nodeName.toLowerCase() === 'button') {// 删除提示var result = window.confirm('删除要三思啊~~~')if (result) {// 获取要删除元素的下标var activeIndex = e.target.dataset.index// 删除对应元素dataList.splice(activeIndex, 1)// 重新将数组保存到本地localStorage.setItem('toDoList', JSON.stringify(dataList));// 重新渲染页面render()}}}