头像

带有本地存储功能的留言板js代码【原创

来源:http://www.sucaihuo.com/js/3609 注***春 2018-04-08 21:06浏览(342) 收藏

这是一个很好用的带有本地存储功能的留言板js代码,页面设计的比较粗糙,主要看功能。
带有本地存储功能的留言板js代码
分类:表单代码 > 表单插件 难易:高级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 5 下载资源 下载积分: 50 积分

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>
标签: 留言本地
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/3609.html
评论11
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 10楼
    04-16 15:00
    ***少
    拿来干工作不错,非常实用些
  • 头像 9楼
    04-15 17:29
    豪***天
    下载了,真的是不错的分享
  • 头像 8楼
    04-09 21:37
    上***峰
    本地存储,显示,确实很多地方都可以用
  • 头像 7楼
    04-09 14:23
    en***37
    本地存储功能不错啊,学习啦
  • 头像 6楼
    04-09 13:17
    yz***an
    应用场景很多,如果配合css做出更漂亮的样式就完美了
  • 头像 5楼
    04-09 11:12
    舒***畅
    功能实用,但本地存储还是有些“风险”的。
  • 头像 4楼
    04-09 10:10
    qz***er
    留言板用写的cookie吗
  • 头像 3楼
    04-09 09:37
    He***en
    受教了 感谢多谢
  • 头像 板凳
    04-09 08:22
    Ja***es
    这个js写的不错,感谢哦!
  • 头像 椅子
    04-09 00:07
    心***扬
    非常实用,很好,nice,感谢分享……
1 2