Javascript之网页版待办事项
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能。
其中页面的HTML布局和CSS样式取用原站，JS部分为自己编写。
效果图
完整代码
HTML、JS部分
<!DOCTYPE html>
<html>
<head>
<title>ToDoList—最简单的待办事项列表</title>
<link rel="stylesheet" href="todolist.css">
</head>
<body>
<header>
<section>
<form action="javascript: void(0)" id="form">
<label for="title">ToDoList</label>
<input type="text" id="title" placeholder="添加ToDo" autocomplete="off"/>
</form>
</section>
</header>
<section id="section">
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<script>
var title_ele = document.getElementById("title");
var todolist_ele = document.getElementById("todolist");
var donelist_ele = document.getElementById("donelist");
var section_ele = document.getElementById("section");
// 功能1，添加待办事项
addEvent(title_ele, "keydown", function(e){
var keyCode = e.which || e.keyCode;
var obj = {
tag_name : "li",
children : [
{
tag_name : "input",
attributes : {
type : "checkbox",
class : "checkbox"
}
},
{
tag_name : "p",
content : title_ele.value
},
{
tag_name : "a",
attributes : {
href : "javascript:void(0)"
},
content : "-"
}]
}
if(keyCode === 13){
console.log(title_ele.value);
if(title_ele.value === ""){
alert("请输入待办事项内容，再按Enter确认")
}else{
todolist_ele.insertBefore(createEle(obj), todolist_ele.childNodes[0]);
title_ele.value = "";
}
}
})
// 功能2，完成待办事项
addEvent(todolist_ele, "change", ".checkbox", function(){
donelist_ele.insertBefore(this.parentNode, donelist_ele.childNodes[0]);
})
// 功能3，重置已完成事项
addEvent(donelist_ele, "change", ".checkbox", function(){
todolist_ele.insertBefore(this.parentNode, todolist_ele.childNodes[0]);
})
// 功能4，删除事项
addEvent(section_ele, "click", "a", function(){
this.parentNode.remove();
})
// 功能5，修改事项内容
addEvent(todolist_ele, "click", "p", function(){
var insert_html = '<input value="' + this.innerText + '">';
this.innerHTML = insert_html;
this.children[0].select();
addEvent(this.children[0], "blur", function(){
this.parentNode.innerText = this.value;
})
addEvent(this.children[0], "keydown", function(e){
var keyCode = e.which || e.keyCode;
if(keyCode === 13){
this.parentNode.innerText = this.value;
}
})
})
// 封装创建元素的函数
function createEle(obj){
var node = document.createElement(obj.tag_name);
if(obj.attributes){
// 若属性存在，则遍历属性添加给node
for(var attr in obj.attributes){
node.setAttribute(attr, obj.attributes[attr]);
}
}
if(obj.content){
// 若内容存在，则将内容插入节点中
node.innerText = obj.content;
}
if(obj.children && obj.children.length > 0){
// 若子集存在，则遍历子集，递归调用createEle()
for(var i = 0; i < obj.children.length; i++){
node.appendChild(createEle(obj.children[i]));
}
}
return node;
}
// 封装事件委托和事件监听
function addEvent(ele, event_type, cb_or_selector, cb){
// 若传入的是4个参数且第三个参数是字符串，说明是添加事件委托
if(arguments.length === 4 && typeof cb_or_selector === "string"){
// 添加事件委托，获取事件目标
ele.addEventListener(event_type, function(evt){
var e = evt || event;
var target = e.target || e.srcElement;
// 根据传入的字符串判断选择器类型
switch(cb_or_selector.substr(0, 1)){
case ".":
var selector_type = "className";
var selector_name = cb_or_selector.slice(1);
break;
case "#":
var selector_type = "id";
var selector_name = cb_or_selector.slice(1);
break;
default:
var selector_type = "nodeName";
var selector_name = cb_or_selector.toUpperCase();
}
// 封装事件冒泡逐层向上查找事件目标
while(target !== ele){
// 验证事件目标
if(target[selector_type] === selector_name){
// 使用call改变this指向
cb.call(target, e);
break;
}
target = target.parentNode;
}
})
// 若逻辑只有两种，可以使用 return false
return false;
}
// 若传入三个参数，说明是添加事件监听
ele.addEventListener(event_type, cb_or_selector);
}
</script>
</body>
</html>
CSS部分
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}
注意点
案例封装了两个功能函数（可以在其他项目中复用）：
- 创建元素函数。该函数以
对象的形式传入需要创建元素的基本信息，包括元素标签、元素属性、元素内容、子元素等，通过递归调用，实现批量创建元素，便于渲染到HTML中。 - 添加事件函数。该函数将
事件监听和事件委托两项功能封装到一起，给元素添加事件时可以直接调用，保证了代码结构的清晰明确。
Javascript之网页版待办事项的更多相关文章
- JAVASCRIPT实现网页版：俄罗斯方块
HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码 ...
- javascript实现移动端网页版阅读器
现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...
- 利用 JavaScript SDK 部署网页版“Facebook 登录”
facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...
- JavaScript之简易http接口测试工具网页版
简易http接口测试工具网页版,支持get.post请求,支持json格式消息体,form表单暂不支持. httpClient.html <!DOCTYPE html> <html ...
- 个人待办事项工具的设计和搭建（IFE前端2015春季 任务3）
这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 网页版电子表格控件tmlxSpreadsheet免费下载地址
tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).. 程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能 ...
- 基于HTML5的捕鱼达人游戏网页版
之前给大家分享了html5实现的水果忍者,愤怒的小鸟,中国象棋游戏.今天给大家分享一款捕鱼达人(fishjoy)网页版游戏的源码.可以在线玩也可以下载到本地.它使用html5技术和javascript ...
随机推荐
- Janet Wu price
上次也是第一次参加百公里是2012的时候,那年的主题是一路有你,和一群同事从深圳湾走到福田,最后累了就回家了,那晚应该是睡得很好吧. 今年是提前报名了,虽然还不确定是否参加.因为说实话,我不喜欢拥堵的 ...
- 爬虫入门（四）：urllib2
主要使用python自带的urllib2进行爬虫实验. 写在前面的蠢事:本来新建了一个urllib2.py便于好认识这是urllib2的实验,结果始终编译不通过,错误错误.不能用Python的关键字( ...
- Swift iOS实现把PCM语音转成MP3格式
最近折腾了swift的语音录制识别和转码,这块还是比较坑的,由于语音识别的准确度实测大概也就80%左右,所以还是需要上传录音文件啊.首先是用讯飞语音SDK实现语音录制和识别(语音听写),第一个坑是讯飞 ...
- AI入门之KNN算法学习
一.什么是KNN算法 kNN(k-NearestNeighbor),也就是k最近邻算法.顾名思义,所谓K最近邻,就是k个最近的邻居的意思.也就是在数据集中,认为每个样本可以用离他最距离近的k个邻居来代 ...
- OpenCV读一张图片并显示
Java 版本: JavaCV 用OpenCV读一张图片并显示.只需将程序运行时的截图回复.如何安装配置创建项目编写OpenCV代码,可参考何东健课件和源代码或其他资源. package com.gi ...
- git工作中常用操作总结
这篇文章主要记录下工作中常用的git操作.主要是对之前文章记录的问题做个总结,这个其实在idea中操作更加简单 别名配置 在敲git 命令时,其实可以使用别名,比如 commit可以配置为ci 下面是 ...
- Java 创建、编辑、删除Excel命名区域
Excel命名区域,即对指定单元格区域进行命名,以便对单元格区域引用,如在公式运用中可以引用指定命名区域进行公式操作.在创建命名区域时,可针对整个工作簿来创建,即workbook.getNameRan ...
- 原来rollup这么简单之 rollup.generate + rollup.write篇
大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. 计划 rollup系列打算 ...
- 使用ASP.NET MVC 5快速实现芒果分销后台管理系统(前言)
### 前言 在前一篇文章中,我提到最近要陆续为大家写一些.Net实战技术文章.从今天起,我将围绕一个入门级现实的芒果分销管理系统案例,使用ASP.NET MVC 5,从前端到后端,一步一步为大家呈现 ...
- 公钥体系（PKI）等密码学技术基础
公钥体系(PKI)等密码学技术基础 公钥体系(Public Key Infrastructure, PKI)的一些概念 对称密码算法, 典型算法:DES, AES 加解密方共用一个密钥 加/解密速度快 ...