前端学习-备忘录项目实战
期末考试快到了，需要一个复习计划表了，结合最近所学，就搞了这么一个 html+css+js 的一份小作品
添加了缓存功能：刷新/关闭计划表也不会消失啦~
我的个人博客：https://www.kimiye.xyz
传送门：Memo Web
2019.7.7更新（界面出错按shift+F5刷新）
- 增加上下移动按钮（期末复习时发现无法体现ToDoList的优先级，故增加）
- 修复默认有一个空白项的bug
html代码很简单
1个table
1个div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>备忘录 - Memo Web</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/page-index.css">
</head>
<body>
<table id="memoTable">
<tr>
<th>索引</th>
<th>内容</th>
<th> </th>
</tr>
<!-- <tr> <td>1</td> <td>高数</td> <td><a href="javascript:;">Delete</a></td> </tr> <tr> <td>2</td> <td>大物</td> <td><a href="javascript:;">Delete</a></td> </tr> <tr> <td>3</td> <td>模电</td> <td><a href="javascript:;">Delete</a></td> </tr> -->
</table>
<div id="addDiv">
<p>添加新记录</p>
<span>内容:</span>
<input type="text" id="inputText">
<button id="addButton">添加</button>
</div>
<script src="js/function.js"></script>
</body>
</html>
css代码也不复杂
主要就是对边框、间距的处理
/* 表格样式 */
table{
background-color: #e9e9e9;
/* 居中 */
margin: 50px auto;
/* 边框 */
border-top: 1px solid black;
border-right: 1px solid black;
/* 文字居中 */
text-align: center;
}
th{
font-weight: bold;
}
th,td{
/* 边框 */
border-bottom: 1px solid black;
border-left: 1px solid black;
/* 间距 */
padding: 5px 10px;
}
/* 超链接样式 */
a{
color: blue;
text-decoration: none;
}
a:hover{
color: red;
}
/* div样式 */
div{
background-color: #e9e9e9;
width: 300px;
/* 居中 */
margin: 50px auto;
/* 边框 */
border: 1px solid black;
}
div p{
text-align: center;
margin: 5px 0px;
}
div span{
margin-left: 5px;
margin-right: 5px;
}
div input{
padding: 2px 5px;
width: 225px;
}
div button{
display: block;
margin: 5px auto;
}
js代码
函数已经封装好了
// 更新
function update()
{
var allTr = document.getElementsByTagName("tr");
for(var i=1; i<allTr.length; i++)
allTr[i].children[0].innerHTML = i;
}
// 删除记录
function del()
{
var tr = this.parentNode.parentNode;
var index = tr.children[0].innerHTML;
if(confirm("确定删除索引为"+index+"的记录吗?"))
{
tr.parentNode.removeChild(tr);
update();
}
return false;
}
// 增加记录
function add()
{
var input = document.getElementById("inputText");
var table = document.getElementById("memoTable");
var tr = document.createElement("tr");
if(input.value == "")
return;
tr.innerHTML = "<td>" + table.children.length + "</td><td>" + input.value + "</td><td><a href=\"javascript:;\">Delete</a></td>";
tr.getElementsByTagName("a")[0].onclick = del;
table.appendChild(tr);
input.value = "";
}
// 按键响应事件
function onKeyPress()
{
var keyCode = null;
if(event.which)
keyCode = event.which;
else if(event.keyCode)
keyCode = event.keyCode;
if(keyCode == 13)
{
add();
return false;
}
return true;
}
// 绑定点击响应事件
function band()
{
var btn = document.getElementById("addButton");
btn.onclick = add;
var input = document.getElementById("inputText");
input.onkeypress = onKeyPress;
window.onbeforeunload = write;
}
// 读取本地缓存
function read()
{
var str = localStorage.getItem("CONTENT");
var content = str.split("|$|");
// console.log(str);
// console.log(content);
var table = document.getElementById("memoTable");
for(var i=0; i<content.length; i++)
{
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + table.children.length + "</td><td>" + content[i] + "</td><td><a href=\"javascript:;\">Delete</a></td>";
tr.getElementsByTagName("a")[0].onclick = del;
table.appendChild(tr);
}
}
// 写入本地缓存
// 只能写入一个对象 所以要把所有内容封装在一个字符串中
function write()
{
var allTr = document.getElementsByTagName("tr");
var str = "";
for(var i=1; i<allTr.length-1; i++)
str += allTr[i].children[1].innerHTML + "|$|";
str += allTr[allTr.length-1].children[1].innerHTML
localStorage.setItem("CONTENT",str);
}
// ------------------------------------------
band();
read();
js笔记：
获取父元素：
obj.parentNode
增加子元素方法(重点在于创建子元素)：
father.appendChild(son);
删除子元素方法：
father.removeChild(son); <-> son.parentNode.removeChild(son);
DOM Event
onclick --- 鼠标点击
onkeypress --- 键盘按下
onbeforeunload --- 刷新/关闭网页
读取本地缓存：
localStorage.getItem(key_name);
写入本地缓存：
localStorage.setItem(key_name,value);
字符串分割：
str.split(字符串/正则表达式);
