学习内容:学习前端(Day29)
1、完成TodoList练习
1、完成TodoList练习
(1)要求使用Bootstrap样式,使用本地缓存存储。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
</head>
<style type="text/css">
#txt {
display: inline-block;
width: 500px;
}
.title {
font-weight: bold;
}
.del {
color: #ccc;
text-decoration: line-through;
}
</style>
<body>
<!-- 导航条start -->
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand title" href="#">TodoList</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" id="txt">
</div>
<button type="button" class="btn btn-default addBtn">addTodoList</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<!-- 导航条end-->
</nav>
<div class="container">
<table class="table table-condensed">
<tbody id="tablelist">
</tbody>
</table>
<a href="javascript:(0)" class="delAll">删除所有完成的事项</a>
</div>
<script type="text/javascript">
(function () {
//初始化数据
/* var todoList = [{'title':'人生价值观','done':false},{'title':'交个朋友','done':false},{'title':'今天周三 合适学习','done':false}];
localStorage.setItem("todoList",JSON.stringify(todoList)) */
var todoList = [];
// 获取本地缓存
function init() {
ar list = localStorage.getItem("todoList");
todoList = JSON.parse(list);
}
init();
console.log(todoList);
//创建html元素
function createHtml() {
for (var index in todoList) {
var tr = document.createElement("tr");
var ckTd = document.createElement("td");
ckTd.setAttribute("width", "10");
ckTd.setAttribute("class", "changeBox");
var titleTd = document.createElement("td");
var titleTxt = document.createTextNode(todoList[index].title)
var spanorinput = null;
if (todoList[index].done) {
spanorinput = document.createElement("span");
spanorinput.setAttribute("class", "glyphicon glyphicon-ok");//小图标
titleTd.setAttribute("class", "del");//删除线
} else {
spanorinput = document.createElement("input");
spanorinput.setAttribute("type", "checkbox");
spanorinput.onclick = changState;
}
titleTd.appendChild(titleTxt);
ckTd.appendChild(spanorinput);
tr.appendChild(ckTd);
tr.appendChild(titleTd)
//将创建好的tr 插入到table中
document.querySelector("#tablelist").appendChild(tr);
}
}
createHtml();
//动态添加
document.querySelector(".addBtn").onclick = function () {
var va = document.querySelector("#txt").value;
if (va.trim()) {
var jsontodo = {
'title': va,
'done': false
};
console.log(todoList + "xxx");
if (todoList == null) {
todoList = [];
}
todoList.push(jsontodo);
localStorage.setItem("todoList", JSON.stringify(todoList));
document.querySelector("#tablelist").innerHTML = "";
createHtml();
} else {
alert("请输入您要加的事项!!");
}
}
function changState() {
if (confirm("您确定要已经完成了该事项吗?")) {
//改变checkbox
var inputParent = this.parentNode;//获取父元素
var span = document.createElement("span");
span.setAttribute("class", "glyphicon glyphicon-ok");
inputParent.replaceChild(span, this);//替换子元素
//改变title
var titleTd = inputParent.nextSibling;//获取下一个td节点
titleTd.setAttribute("class", "del");
var title = titleTd.childNodes[0].nodeValue;//获取当前文本节点
var index = findIndexByTitle(title);
if (index != -1) {
todoList[index] = { 'title': title, 'done': true };
//同步到本地库
localStorage.setItem("todoList", JSON.stringify(todoList));
}
} else {
this.checked = false;//点击取消时不进行勾选
}
}
/* 通过title查找对应的对象索引 */
function findIndexByTitle(title) {
for (var index in todoList) {
var todo = todoList[index];//这种方法如果title重复,则只能返回第一个title的索引
if (todo.title == title) {//改变多个相同title的done时只能改掉第一个
return index;
}
}
return -1;
}
//删除所有完成的事项
document.querySelector(".delAll").onclick = function () {
var len = todoList.length;
//for(var i = 0;i < xx.length;i++){}
for (var index = len - 1; index >= 0; index--) {
var todo = todoList[index];
if (todo.done) {
todoList.splice(index, 1);
}
}
document.querySelector("#tablelist").innerHTML = "";
createHtml();
localStorage.setItem("todoList", JSON.stringify(todoList));
}
})();
</script>
</body>
</html>