js代码

<script>
	var text = document.querySelector("#text");
    var submit = document.querySelector("#submit");
    var plan = document.querySelector(".plan");
    var done = document.querySelector(".done");
    var success = document.querySelector(".success");
    var del = document.querySelector(".del");
    var data = [];

	function getData() {
        return localStorage.todo ? JSON.parse(localStorage.todo) : [];
    }
    function saveData(data) {
        localStorage.todo = JSON.stringify(data);
    }
    function reWrite() {
        data = getData();
        var str1 = "", str2 = "";
        data.forEach(function (v, i) {
            if (!v.done) {
                str1 += `<li id=${i}>
                <input type="checkbox">
                <span onblur="change(this)" contenteditable>${v.content}</span>
                <p class="time">${time(v.time)}</p>
                </li>`;
            } else {
                str2 += `<li id=${i}>
                <input type="checkbox">
                <span>${v.content}</span>
                <p class="time">${time(v.time)}</p>
                </li>`;
            }
        });
        plan.innerHTML = str1;
        done.innerHTML = str2;
    }
    reWrite();
    function time(t) {
        var date = new Date();
        date.setTime(t);
        var year = date.getFullYear();
        var month = setZero(date.getMonth() + 1);
        var day = setZero(date.getDate());
        var hour = setZero(date.getHours());
        var minutes = setZero(date.getMinutes());
        var seconds = setZero(date.getSeconds());
        return year + "/" + month + "/" + day + " " + hour + ":" + minutes + ":" + seconds;
    }
    function setZero(num) {
        if (num < 10) {
            return "0" + num;
        } else {
            return num;
        }
    }
    submit.onclick = function () {
        if (text.value == "") {
            return
        }
        var val = text.value;
        text.value = "";
        data = getData();
        var date = new Date();
        var time = date.getTime();
        data.push({content: val, time:time, done: false});
        saveData(data);
        reWrite();
    }
    success.onclick = function(){
    	var d = document.querySelectorAll(".plan li input")
    	var index = [];
    	d.forEach(function(v,i){
    		if (v.checked) {
    			index.push(v.parentNode.id)
    		}
    	})

    	data = getData();
    	index.forEach(function(v,i){
    		data[v].done = true;
    	})
    	saveData(data);
    	reWrite()
    }
    del.onclick = function(){
    	var d = document.querySelectorAll(".done li input")
    	var index1 = [];
    	d.forEach(function(v,i){
    		if (v.checked) {
    			index1.push(v.parentNode.id)
    		}
    	})

    	data = getData();
    	for(var i=index1.length-1; i>=0; i--){
    		if (data[index1[i]].done==true) {
    			data.splice(index1[i],1)
    		}
    	}
    	saveData(data);
    	reWrite()
    }

    function change(ele){
    	console.log(1)
    	var id = ele.parentNode.id;
    	var val = ele.innerHTML;
    	var data = getData();
    	data[id].content = val;
    	saveData(data);
    	reWrite();
    }


</script>