ToDoList—最简单的待办事项列表

ToDoList—最简单的待办事项列表

代码如下:(样式与网上的相同,js代码不同)

DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ToDoList—最简单的待办事项列表title>
		<meta name="description" content="ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!" />
		<link rel="stylesheet" href="./css/index.css">
	head>
	<body>
		<header>
			<section>
				<form action="" id="form" onclick="">
					<label for="title">ToDoListlabel>
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
						autocomplete="off" />
				form>
			section>
		header>
		<section>
			<h2>正在进行 <span id="todocount">0span>h2>
			<ol id="todolist" class="demo-box">

			ol>
			<h2>已经完成 <span id="donecount">0span>h2>
			<ul id="donelist">
			ul>
		section>
		<footer>
			Copyright © 2014 todolist.cn <a href="javascript:clear();">cleara>
		footer>
		<script type="text/javascript">
			var title = document.querySelector('#title');
			var ol = document.querySelector('#todolist')
			var ul = document.querySelector('#donelist')
			load();
			// 添加li
			title.addEventListener('keydown', function(e) {
				e = e || window.event;
				if (e.keyCode == 13) {
					if (title.value == '') {
						return
					} else {
						var todolist = {
							title: title.value,
							done: false
						}
						var arr = getdata();
						arr.push(todolist);
						saveData(arr);
						load()
					}
				}
			})  
			//存储数据
			function saveData(todolist) {
				return window.localStorage.setItem('todo', JSON.stringify(todolist))//转化为字符串存储
			}
			//获取数据并存储
			function getdata() {
				var data = window.localStorage.getItem('todo')
				if (data) {
					return JSON.parse(data); //转化为对象
				} else {
					return [];
				}
			}
			//刷新
			function load() {
				//获取最新的存储数据
				var ol = document.querySelector('#todolist')
				var ul = document.querySelector('#donelist')
				var todoCount = document.querySelector('#todocount');
				var doneCount = document.querySelector('#donecount');
				var num = 0;
				var data = getdata()
				//删除原来的子节点,重新填入
				var childs = ol.childNodes;
				for (var i = childs.length - 1; i >= 0; i--) {
					ol.removeChild(childs[i]);
				}
				var childs = ul.childNodes;
				for (var i = childs.length - 1; i >= 0; i--) {
					ul.removeChild(childs[i]);
				}
				var todocount = 0;
				var donecount = 0;
				data.forEach(function(item, index) {
					var li = document.createElement('li')
					li.innerHTML = "

" + item.title + "

"
; li.className = num++; if (item.done) { ul.insertBefore(li, ul.children[0]) li.children[0].checked = 'checked' donecount++ } else { ol.insertBefore(li, ol.children[0]) todocount++ } }) todoCount.innerText = todocount doneCount.innerText = donecount } //删除 ol.addEventListener('click', function(e) { e = e || window.event; if (e.target.nodeName == 'A') { ol.removeChild(e.target.parentNode) var data = getdata(); data.splice(e.target.parentNode.className, 1); saveData(data); load(); } }) // 进行与完成之间跳转 ol.addEventListener('click', function(e) { e = e || window.event; if (e.target.className == 'change') { var remove = ol.removeChild(e.target.parentNode); var data = getdata(); data[e.target.parentNode.className].done = true; saveData(data); load(); } }) ul.addEventListener('click', function(e) { e = e || window.event; if (e.target.className == 'change') { var remove = ul.removeChild(e.target.parentNode); var data = getdata(); data[e.target.parentNode.className].done = false; saveData(data); load(); } }) //编辑li文本 var n = 0; ol.addEventListener('click', function(e) { if (e.target.nodeName === 'P') { var p = e.target; var title = p.innerHTML p.innerHTML = "" var input = document.getElementById('input') input.select() //选中input中内容 input.addEventListener('blur', function() { if (input.value) { var data = getdata(); // var index = 'input'.substring(1);//字符串截取 索引1及其后所有的字符 // console.log(index);//nput data[e.target.parentNode.className].title = input.value; saveData(data); load(); }else{ alert('不能为空!'); } }) } })
script> body> html>

你可能感兴趣的:(javascript,html,html5,javascript,html)