首先,这个小项目是基于移动端开发的,新建一个HTML文件,在meta标签添加修改相关属性:
导入css文件和js文件,我导入js文件放在body中最下面,因为先页面渲染再进行数据交互
body设置好的元素和样式
对应的css样式:
最后设置好的效果图:
最后编写js代码:
定义需要的全局变量
第一、页面渲染;页面渲染前读取本地存储,将本地数据读取;如果第一次使用,就创建一个空数组,用于保存数据;
第二、渲染函数
//定义一个渲染函数
function renderList() {
// dataList转换成JSON格式的字符串
// JSON.stringify(dataList) :将对象转换成JSON格式的字符串
// 每一次修改完dataList的数据,要存放在localStorage
localStorage.dataList = JSON.stringify(dataList);
// 每一次渲染前把之前的内容先清空,再渲染
todolist.innerHTML = "";
donelist.innerHTML = "";
var todoNum = 0;
var doneNum = 0;
dataList.forEach(function(item,index){
// 当点击后,就新创建一个item这样一个div到clist的div里
var newdiv = document.createElement("div");
newdiv.className = "item";
// 判读checkbox是否checked
if (item.type == "todo") {
newdiv.innerHTML = `
<span class="checkbox">
<input class="ipt_cbox" type="checkbox" name="check" value="" data-index="${index}">
</span>
<span class="content">${item.content}</span>
<span class="delete" data-index="${index}"></span>
`;
todolist.appendChild(newdiv);
todoNum++;
inputDom.value = "";
}else{
newdiv.innerHTML = `
<span class="checkbox">
<input class="ipt_cbox" type="checkbox" name="check" checked = "checked" value="" onclick="return false">
</span>
<span class="content">${item.content}</span>
<span class="delete" data-index="${index}"></span>
`;
donelist.appendChild(newdiv);
doneNum++;
inputDom.value = "";
}
});
// 修改待办事项的数量
todoNumspan.innerHTML = todoNum;
// 修改已完成事项的数量
doneNumspan.innerHTML = doneNum;
}
监听输入框
监听点击勾选框和删除图标的事件
这个项目我有上传到GitHub上,将链接网址生成二维码可以手机扫描,在手机上使用:备忘录链接
这个我也将它打包成了APP,在我的资源可以下载,可以下载下来作为自己的备忘录APP使用;