欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用原生js完成一个todoList

程序员文章站 2022-07-15 15:30:16
...

因为在接口,时间有些充足。想着自己屎一般的js,打算重新来学学一些和js有关的技能

据说学习js,十个有九个都是从todoList开始的,那当然,我也是要从众的。

新建一个html文件,随意署名。todo内容主要保存在localstorage里面,不涉及到数据库什么的,比较简单。

很随意的写了几个框,又很随意的写了css。大概长这样
利用原生js完成一个todoList
框框部分的html如下。

<div class="main">
    <div class="needToDo">
        <input class="inp" type="text" id="inp" placeholder="请输入你想要完成的事情" placeholder-class="plas" />
        <button type="button" class="save" id="saveData">保存</button>
    </div>
    <div class="saveContent">
        <p>未完成</p>
        <ul class="saveUl" id="saveUl">
        </ul>
    </div>
</div>
<div class="finished">
    <p>已完成</p>
    <p>
        <a class="clearAll" id="clearAll">清空已完成</a>
    </p>
    <ul class="finishedUl" id="finishedUl">
    </ul>
</div>

上部分是未完成的,下部分是已完成。

未完成的部分有个输入框和确认按钮。
接下来写功能。
添加功能:

saveData.addEventListener('click', function() {
	//新建一个li
    var dom = document.createElement('li');
    //li里面的内容,就是一个checkbox复选框,一个自己添加的内容。
    dom.innerHTML = '<input type = "checkbox" name="checkVal" value=' + inp.value + ' />' +
    '<span>' + inp.value + '</span>'
    //拼装好html后,append到ul里面
    //将li添加到ul里。这里使用的是appened方法
    saveUl.appendChild(dom);
    arrs.push(inp.value)   //这里的arrs 就是前面localstorage得到的那个arrs
    console.log(arrs)
    //将得到的自己写的todo,添加到arr数组里,然后保存在storage里面。
    localStorage.setItem('unfinished', arrs)
    inp.value = ""
})

这里就要说到一点,因为这个不像vue这一类的,是双向绑定,所以说,有时候写完了保存后,需要刷新一下,才能看到最新写好的东西
利用原生js完成一个todoList

然后,将已保存的未完成已完成 展现在页面上。

//未完成的数据
var unfinished = localStorage.getItem('unfinished');
//已完成的数据
var finished = localStorage.getItem('finished');
var arrs = []
var finishedArrs = [];
    if (unfinished) {
    //因为存到storage里是个字符串,所以需要分割出来。
    arrs = unfinished.split(',');
    for (var i = 0; i < arrs.length; i++) {
        var dom = document.createElement('li');
        //分割出来后拼接,展示在页面上
        dom.innerHTML = '<input type = "checkbox"  name="checkVal" value=' + arrs[i] + ' />' +
        	'<span>' + arrs[i] + '</span>'
        saveUl.appendChild(dom);
    }
}
if(finished){
    finishedArrs = finished.split(',');
    for (var i = 0; i < finishedArrs.length; i++) {
        var dom = document.createElement('li');
        dom.innerHTML = '<input type = "checkbox" checked  name="checkVal" value=' + finishedArrs[i] + ' />' +
        	'<span>' + finishedArrs[i] + '</span>'
        finishedUl.appendChild(dom);
    }
}

接下来是已完成功能,已完成功能和未完成其实大致是差不多的 点击未完成前面的复选框,选中后,从未完成中删除此选项,添加在已完成中

var checkBoxs = document.getElementsByName("checkVal");
//添加完成效果,点击checkbox,此项就加入已完成
 for (var i = 0; i < checkBoxs.length; i++) {
      //因为都是个数组,所以获取批量的时间,然后再获取当前的checkbox的时间
       //然后再得到他的父节点,给父节点加上字母截断的效果,然后再把这个从未完成中删除,添加进已完成中
       checkBoxs[i].addEventListener('change', function(event) {
       var parentLi = event.target.parentNode;
       parentLi.style.textDecoration = "line-through"
       finishedArrs.push(parentLi.innerText)
       for (var j = 0; j < arrs.length; j++) {
       	if (arrs[j] == parentLi.innerText) {
       		console.log(j)
       		//查到当前选中的是数组中的第几个,然后从未完成中删掉,加入已完成
       		arrs.splice(j, 1)
       		localStorage.setItem('unfinished', arrs)
       		//这一句是强制页面刷新
       		window.location.reload();
       	}
       }
   localStorage.setItem('finished', finishedArrs)
})

}

利用原生js完成一个todoList

写到最后其实就差不多了,但是有个问题,也是没想通。
我添加了新的项目,没能立即将它变为已完成,这里应该需要其他的写法,不过暂时没想到。哈哈

相关标签: javascript