这是一个很好用的带有本地存储功能的留言板js代码,页面设计的比较粗糙,主要看功能。
查看演示
下载资源:
10
次 下载资源
下载积分:
50
积分
js代码
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 += `
${v.content}
${time(v.time)}
`;} else {
str2 += `
${v.content}
${time(v.time)}
`;}
});
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();
}