备忘录html源码,备忘录.html

body{

background: url(5.jpg) no-repeat ;

background-size: cover;

}

.biji {

margin: 10px;

border: 1px solid #ccc;

border-radius: 3px;

padding: 5px;

position: relative;

padding-top: 15px;

}

.biji span {

position: absolute;

right: 3px;

top: 3px;

font-size: 12px;

color: #666;

}

.biji .createDate {

font-size: 12px;

margin-top: 10px;

color: #666;

}

备份

导入

请稍后...

备忘录

---

+

返回 新增备忘录

---

var bijis = [];

loadData();

function loadData() {

if (localStorage.bijis) {

bijis = JSON.parse(localStorage.bijis);

}

bijiList.innerHTML = "";

for (var i = bijis.length - 1; i >= 0; i--) {

var b = bijis[i];

var newDiv = document.createElement("div");

newDiv.className = "biji";

var deleteSpan = document.createElement("span");

deleteSpan.innerHTML = "删除";

var titleDiv = document.createElement("div");

titleDiv.className = "title";

titleDiv.innerHTML = b.content;

var createDateDiv = document.createElement("div");

createDateDiv.className = "createDate";

createDateDiv.innerHTML = b.createDate;

newDiv.appendChild(deleteSpan);

newDiv.appendChild(titleDiv);

newDiv.appendChild(createDateDiv);

bijiList.appendChild(newDiv);

}

}

impbtn.onclick = function() {

var uploadInput = document.createElement("input");

document.body.appendChild(uploadInput);

uploadInput.type = "file";

uploadInput.style.display = "none";

uploadInput.click();

uploadInput.onchange = function() {

var f = uploadInput.files[0];

var filereader = new FileReader();

filereader.readAsText(f);

shaohou.style.display = "block";

filereader.onload = function() {

setTimeout(function() {

shaohou.style.display = "none";

var bijis = JSON.parse(filereader.result);

localStorage.bijis = filereader.result;

loadData();

}, 3000);

};

};

};

bakbtn.onclick = function() {

var blob = new Blob([JSON.stringify(bijis)],{"type": "application/json"});

var url = URL.createObjectURL(blob);

console.log(url);

var aEle = document.createElement("a");

aEle.download = "备份.biji";

aEle.href = url;

document.body.appendChild(aEle);

aEle.click();

document.body.removeChild(aEle);

};

addbtn.onclick = function() {

d1.style.display = "none";

d2.style.display = "block";

cntDiv.focus();

};

returnbtn.onclick = function() {

d1.style.display = "block";

d2.style.display = "none";

if (cntDiv.innerHTML.length > 0) {

var biji = {

content: cntDiv.innerHTML,

createDate: (new Date()).toLocaleString()

};

bijis.push(biji);

localStorage.bijis = JSON.stringify(bijis);

cntDiv.innerHTML = "";

loadData();

}

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史