前端学习-备忘录项目实战

最新推荐文章于 2023-06-15 18:02:39 发布

Flyyy__

最新推荐文章于 2023-06-15 18:02:39 发布

阅读量472

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Flyyy_/article/details/95338324

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

期末考试快到了，需要一个复习计划表了，结合最近所学，就搞了这么一个 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>&nbsp;</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(字符串/正则表达式);

Flyyy__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习-备忘录项目实战

期末考试快到了，需要一个复习计划表了，结合最近所学，就搞了这么一个 html+css+js 的一份小作品添加了缓存功能：刷新/关闭计划表也不会消失啦~我的个人博客：https://www.kimiye.xyz传送门：Memo Web2019.7.7更新（界面出错按shift+F5刷新）增加上下移动按钮（期末复习时发现无法体现ToDoList的优先级，故增加）修复默认有一个空白项...
复制链接

扫一扫