带有本地存储功能的留言板js代码免费下载

这是一个很好用的带有本地存储功能的留言板js代码,页面设计的比较粗糙,主要看功能。

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录