一，項目題目: 實現“todolist項目”
該項目主要可以練習js操控dom事件，事件觸發之間的邏輯關系，以及如何寫入緩存，獲取緩存、固定。
二，todolist簡介
ToDoList是一款非常優秀的任務管理軟件，用戶可以用它方便地組織和安排計划。該軟件短小精悍，僅有一個 數百 KB 的可執行文件就能完成所有功能，並且界面設計優秀，初級用戶也能夠快速上手。
todolist具體功能
三，項目需求：
本項目參考了http://www.todolist.cn/點擊打開鏈接，對代碼進行了一些精簡，並添加了一些功能。在實現項目的過程中，首先是實現最基本的功能，然后不斷地添加增強功能和美化。
參考鏈接http://www.todolist.cn/ 1.將用戶輸入添加至待辦項 2.可以對todolist進行分類（待辦項和已完成組），用戶勾選既將待辦項分入已完成組 3.todolist的每一項可刪除和編輯 4.下方有clear按鈕，並清空所有todolist項
四，小編所做的靜態頁面
最終成型的結果：丑是丑了點，將就着看唄
五，基礎HTML和CSS准備
5.1：input元素標簽的用法
一個簡單的HTML表單，包含兩個文本輸入框，一個提交按鈕。
總結Input的標簽：（input標簽用於搜集用戶信息）
Input表示Form表單中的一種輸入對象，其又隨Type類型的不同而分文本輸入框，密碼輸入框，單選/復選框，提交/重置按鈕等。
1，type=text
輸入類型是text，這是我們見的最多也是使用最多的， 比如登陸輸入用戶名，注冊輸入電話號碼，電子郵件，家庭住址等等。 當然這也是Input的默認類型。 參數name：同樣是表示的該文本輸入框名稱。 參數size：輸入框的長度大小。 參數maxlength：輸入框中允許輸入字符的最大數。 參數value：輸入框中的默認值 特殊參數readonly：表示該框中只能顯示，不能添加修改。
代碼格式：
<form> your name: <input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30，允許最大字符數為20"><br> <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能讀不能修改"> </form>
測試代碼：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content="all kinds of input">
<meta name="keywords" content="input,html">
<title>各種input的測試</title>
</head>
<body>
<form action="">
姓名1：<input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30，允許最大字符數為20"><br>
姓名2：<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能讀不能修改"><br>
</form>
</body>
</html>
2，type=password
此密碼輸入框，就是輸入的信息是保密字符。
3, input中的placeholder屬性
placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段為空時顯示，並會在字段獲得焦點時消失。
注釋：placeholder 屬性適用於以下的 <input> 類型：text, search, url, telephone, email 以及 password
期間又提及到一個表單標簽form，下面繼續介紹表單標簽。
5.2，表單標簽<form>
表單用於向服務器傳輸數據。
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
其中上面又提到了提交按鈕，我學一下。
5.3，button標簽的用法
就是下面代碼標記了一個按鈕
<button type="button">Click Me!</button>
定義和用法
<button> 標簽定義一個按鈕。
在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
<button> 控件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。<button> 與 </button> 標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。例如，我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中創建一個吸引人的標記圖像。
唯一禁止使用的元素是圖像映射，因為它對鼠標和鍵盤敏感的動作會干擾表單按鈕的行為。
請始終為按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其他瀏覽器中（包括 W3C 規范）的默認值是 "submit"。
5.4，id屬性
定義和用法
id 屬性規定 HTML 元素的唯一的 id。
id 在 HTML 文檔中必須是唯一的。
id 屬性可用作鏈接錨（link anchor），通過 JavaScript（HTML DOM）或通過 CSS 為帶有指定 id 的元素改變或添加樣式。
5.5，Span標簽
<span> 在CSS定義中屬於一個行內元素,在行內定義一個區域，也就是一行內可以被 <span> 划分成好幾個區域，從而實現某種特定效果。
使用<Span>元素對文本的一部門進行着色。也就是說被<span>元素包含的文本，既可以使用css對其定義樣式，或者使用JavaScript對其進行操作。
<span> 本身沒有任何屬性。 <div> 在CSS定義中屬於一個塊級元素 <div> 可以包含段落、標題、表格甚至其它部分。這使DIV便於建立不同集成的類，如章節、摘要或備注。在頁面效果上，使用 <div> 會自動換行，使用 <span> 就會保持同行。
5.6，label標簽
<label>標簽為input元素定義標注。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
for功能：表示這個lable是為哪個控件服務的，lable標簽要綁定for指定HTML元素的ID或name屬性，你點擊的時候，所綁定的元素將獲取焦點。
用法：<lable for="inputBox">姓名</lable><input id="inputbox' type="text">
accesskay：（一般很少用）
功能：定義訪問這個控件的熱鍵。
用法：<label for="InputBox" accesskey＝"N">姓名</label><input id="InputBox" type="text">
局限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優先激活瀏覽器的快捷鍵。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
5.7，textarea 標簽
<textarea> 標簽定義多行的文本輸入控件。
文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
注釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。
提示：可以通過 <textarea> 標簽的 wrap 屬性設置文本輸入區內的換行模式
5.8，input新增的三個屬性autocomplete autocapitalize autocorrect
autocomplete
默認為on，其含義代表是否讓瀏覽器自動記錄自謙輸入的值。
很多時候，需要對客戶的資料進行保密，防止瀏覽器軟件或者惡意插件獲取到。可以在input中加入autocomplete = "off"來關閉記錄，系統需要保密的情況下可以使用此參數。
autocapitalize
自動大小寫
autocorrect
糾錯
5.9，section標簽
<section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
section的真正應用只是很少，主要是article里面的標簽，例如<h1><p></p></h1> => <section><h1><p></p></h1></section> 這樣語義化才有效，如果無緣無故把div改為section，反而是誤導了搜索引擎。當然，這要看情況而定，但<section>到底還是代表章節，至於什么才屬於‘章節’就有自己去判斷了。
section和div的異同
1、section和div都可以對內容進行分塊，但是section是進行有意義的分塊，無意義的分塊應該由div來做，例如用作設置樣式的頁面容器。
2、section內部必須有標題，標題也代表了section的意義所在。
六：代碼
項目結果：
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scalable=no" />
<title>ToDoList-最簡單的待辦事項列表</title>
<meta name="description" content="ToDoList無須注冊即可使用，數據存儲在用戶瀏覽器的html5本地數據庫里，是最簡單最安全的待辦事項列表應用！" />
<link type="text/css" rel="stylesheet" href="css/index.css" >
</head>
<body>
<div class="wrap">
<!--上面的時間內容-->
<div class="time">
<h3 id="concrete_time"></h3>
</div>
<!--頂欄的內容-->
<div class="header">
<form id="form" action="javascript:postAction()" >
<label for="title">ToDoList</label>
<input id="title" name="'title" placeholder="添加ToDo" required="required"
autocapitalize="off" type="text">
</form>
</div>
<!--中間的內容-->
<div class="section">
<h2>
正在進行的計划
<span id="todocount">0</span>
</h2>
<ul id="todolist"></ul>
<h2>
已經完成的計划
<span id="donecount">0</span>
</h2>
<ul id="donelist"></ul>
</div>
<!-- 清除鍵內容-->
<div class="clear">
<div class='clear-logo' id="btn"></div>
<div class="clear_write">
<a href="javascript:clear();">清空所有計划</a>
</div>
</div>
<!--底部內容-->
<div class="footer">
Copyright © 2014 todolist.cn
</div>
</div>
</body>
<script type="text/javascript" src="js/index.js">
</script>
</html>
CSS代碼：
*{
padding:0;
margin:0;
}
ul>li{
list-style: none;
overflow: hidden;
}
.wrap{
width:100%;
background-color:#cdcdcd;
overflow: hidden;
}
.header{
background-color: black;
height: 50px;
}
.time{
background: #cdcdcd;
height: 60px;
margin: 0 auto;
line-height: 50px;
font-family: "楷體","楷體_GB2312";
color: red;
}
h1{
position: relative;
margin: 15px 20px;
}
#form{
width: 600px;
margin:0 auto;
overflow: hidden;
}
label{
color: #ddd;
line-height: 50px;
font-size: 24px;
float: left;
width: 100px;
cursor: pointer;
}
.header input{
float: right;
width:60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
border: none;
}
.section{
width: 600px;
margin:20px auto;
}
h2{
position: relative;
margin: 15px 10px;
font-family: "楷體","楷體_GB2312";
}
h2 span{
position: absolute;
right: 5px;
top: 2px;
padding: 0 15px;
display: inline-block;
background: #e6e6fa;
font-size: 14px;
color: red;
text-align: center;
height: 20px;
line-height: 22px;
border-radius: 20px;
}
ul li{
overflow: hidden;
height: 32px;
line-height: 32px;
background-color: #fff;
border-radius: 3px;
border: 2px solid red;
padding:0 10px;
margin-bottom: 10px;
}
/*給復選框中進行美化，*/
ul li input[type='checkbox']{
float: left;
width: 22px;
height: 22px;
margin:6px 5px 0 0;
background-color: silver;
}
/*給計划的內容進行美化*/
ul li input[type='text']{
float: left;
width: 70%;
text-indent: 5px;
height: 26px;
line-height: 27px;
margin: 2px 0;
margin-left: 20px;
outline: none;
border: none;
font-family: "楷體","楷體_GB2312";
}
/*給移除的內容進行美化*/
ul li a{
float: right;
width:60px;
background-color: #e6e6fa;
color:red;
border: 6px solid #fff;
margin-top: 3px;
border-radius: 14px;
text-align: center;
font-weight: bold;
cursor: pointer;
line-height: 14px;
}
#donelist li{
border-left: 5px solid #fff;
}
#donelist li input[type='text']{
background-color:#fff;
}
/*清除所有內容的設置*/
.clear {
font-size: 18px;
padding: 10px;
margin-top: 12px;
outline: none;
}
.clear .clear-logo{
background: url(../img/clear.png) no-repeat center;
background-size:50px ;
height: 50px;
}
.clear .clear_write{
text-align: center;
margin: 10px auto;
font-family: "楷體","楷體_GB2312";
}
.clear a:hover{
color: red;
cursor: pointer;
}
.footer{
width: 600px;
margin: 30px auto;
color: #666;
font-size: 14px;
text-align: center;
}
JS代碼：
// 設置時間
var h1 = document.getElementById("concrete_time");
setInterval(function () {
var myDate = new Date();
var y = myDate.getFullYear();
var m = myDate.getMonth();
var d = myDate.getDate();
var h = myDate.getHours();
var min = myDate.getMinutes();
var s = myDate.getSeconds();
h1.innerHTML = y+"年"+(m+1)+ "月"+ d + "日"+h+"時"+min+"分" +num(s)
},1000);
function num(n) {
if (n<10){
return '0'+n;
}
return n
}
var todolist = document.getElementById('todolist');
var donelist = document.getElementById('donelist');
var todoCount = document.getElementById('todocount');
var doneCount = document.getElementById('donecount');
var todoc =0;
var donec=0;
// 添加Todo的內容
function postAction() {
var title = document.getElementById("title");
if(title.value ===" "){
alert("內容不能為空！")
}else{
var li = document.createElement("li");
li.innerHTML ='<input type="checkbox" onchange="update();">' +
'<input class="title" type="text" onchange="change();" onclick="edit();">' +
'<a href="javascript:remove();">remove</a>';
if(todoc ===0){
todolist.appendChild(li);
}else{
todolist.insertBefore(li,todolist.children[0]);
}
var txtTitle = document.getElementsByClassName("title")[0];
txtTitle.value = title.value;
loop('todolist');
todoc++;
todoCount.innerText = todoc;
title.value = "";
}
}
// 循環 每次添加不同的i值
function loop(str){
var list = null;
str ==='todolist' ? list = todolist :list =donelist;
childs = list.childNodes;
for(var i=0; i<childs.length;i++){
childs[i].children[0].setAttribute('onchange','update("'+i+'","'+str+'")');
childs[i].children[1].setAttribute('onclick','edit("'+i+'","'+str+'")');
childs[i].children[1].setAttribute('onchange','change("'+i+'","'+str+'","'
+childs[i].children[1].value+'")');
childs[i].children[2].setAttribute('href','javascript:remove("'+i+'","'+str+'")');
}
}
// update方法
function update(n,str){
var list = null;
str === 'todolist' ? list = todolist : list = donelist;
var li = null;
childs = list.childNodes;
for(var i=0;i<childs.length;i++){
if(i===Number(n)){
li = childs[i];
}
}
// 刪除原有的，得到li 並刷新了原有的li
remove(n,str);
if(str==='todolist'){
if(donec ===0){
donelist.appendChild(li);
}else {
donelist.insertBefore(li,donelist.children[0]);
}
loop('donelist');
donec++;
doneCount.innerText = donec;
}else if(str ==='donelist'){
todolist.appendChild(li);
loop('todolist');
todoc++;
todoCount.innerText = todoc;
}
}
// edit方法編譯title
function edit(n,str) {
var list = null;
str ==='todolist' ? list = todolist : list = donelist;
childs = list.childNodes;
for(var i=0;i<childs.length;i++){
if(i===Number(n)){
childs[i].children[1].style.border = '1px solid red';
}
}
}
function change(n,str,oldValue) {
var list = null;
str==='todolist' ? list = todolist : list = donelist;
childs = list.childNodes;
for(var i=0; i<childs.length; i++){
if(i===Number(n)){
childs[i].children[1].style.border = 'none';
if(childs[i].children[1].value === ""){
alert('內容不能為空');
childs[i].children[1].value = oldValue;
}
}
}
loop(str);
}
// 清除單個列表
function remove(n,str) {
var list=null;
if (str==='todolist'){
list = todolist;
todoc--;
todoCount.innerText = todoc;
} else if(str==='donelist'){
list = donelist;
donec--;
doneCount.innerText = donec;
}
childs = list.childNodes;
for(var i=childs.length-1;i>=0;i--){
if(i===Number(n)){
list.removeChild(childs[n]);
}
}
loop(str);
}
// 清除所有列表
function clear(){
childs1 = todolist.childNodes;
for(var i=childs1.length-1;i>=0;i--){
todolist.removeChild(childs1[i]);
}
childs2 = donelist.childNodes;
for(var j=childs2.length-1;j>=0;j--){
donelist.removeChild(childs2[j]);
}
todoc = 0;
donec = 0;
todoCount.innerText = todoc;
doneCount.innerText = donec;
}
靜態頁面代碼（未加任何動畫效果）
靜態頁面HTML代碼：
<!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,maximun-scale=1.0,user-scalable=no" /> <title>ToDoList-最簡單的待辦事項列表</title> <meta name="description" content="ToDoList無須注冊即可使用，數據存儲在用戶瀏覽器的html5本地數據庫里，是最簡單最安全的待辦事項列表應用！" /> <link type="text/css" rel="stylesheet" href="css/index.css" > </head> <body> <div class='wrap'> <!--#頂欄的內容--> <div class='topbar'> <div class="container1"> <!--<form action="javascript:postaction()" id="form"> <label for='title'>ToDoList</label> <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" > </form>--> <div class='label'>ToDoList</div> <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" > </div> </div> <!--#中間的內容--> <div class='section'> <div class="container2"> <ul id='right-ul'> <li><div class='todolist-logo'></div><p>正在進行</p></li> <li><div class='donelist-logo'></div><p>已經完成</p></li> </ul> <!--<div class='todolist'> <p>正在進行</p> </div> <div class='donelist'> <p>已經完成</p> </div>--> </div> </div> <!--清除內容--> <div class="clear"> <ul id='center-clear'> <li><div class='clear-logo' id="btn"></div><p >一鍵清空</p></li> </ul> <!--<a href="#">一鍵清空</a>--> </div> <!--#下面的內容--> <div class='footer'> <div class="container3"> <p>Copyright © 2014 todolist.cn</p> </div> </div> </div> <script type="text/javascript" src="./js/index.js"> </script> </body> </html>
靜態頁面CSS代碼：
*{
padding: 0;
margin: 0;
}
.wrap{
width: 100%;
overflow: hidden;
}
ul>li{
list-style: none;
}
a{
text-decoration: none;
}
.topbar{
height: 50p;
background: #333;
line-height: 50px;
}
.container1{
width: 800px;
overflow: hidden;
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;
}
.topbar input{
float: right;
width: 30%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
/*box-shadow: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
/*border: none;*/
}
.section{
padding: 0 10px;
margin: 0 auto;
background: #cdcdcd;
}
.container2{
width: 800px;
overflow: hidden;
margin: 0 auto;
}
.section ul li{
font-size: 24px;
padding: 10px;
border: 1px solid #E0E0E0;
}
.section ul li:hover{
color: blue;
cursor: pointer;
}
.clear{
/*position: fixed;*/
/*padding: 10px 0;*/
/*font-size: 18px;*/
/*background-color: #fafafa;*/
/*text-align: center;*/
}
.clear ul li{
font-size: 18px;
padding: 10px;
border: 1px solid #e0e0e0;
}
.clear ul li:hover{
color: red;
cursor: pointer;
}
.clear ul li p{
text-align: center;
padding-top: 5px;
}
.clear .clear-logo{
background: url(../img/clear.png) no-repeat center;
background-size:40px ;
height: 40px;
}
.footer{
padding: 10px 0;
font-size: 12px;
background-color: #fafafa;
}
.container3{
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.footer p{
padding: 10px 0;
text-align: center;
color: #666;
font-size: 14px;
/*background:#fff;*/
font-size: "楷體";
min-width: 1226px;
}
七：總結
對自己在做CSS，JS中遇到的一些問題，從簡單到難，想記錄下來自己的不足，因為前端這塊是全新的知識點，我卻當做自己會的，所以遇到了很大的困難，但是克服了這些問題，我覺得有必要記錄一下。
7.1 CSS中設置字體的顏色
color即可
7.2 CSS中設置字體為楷體
font-family: "楷體","楷體_GB2312";
7.3 如何把a標簽居中？
第一種思路：a標簽外層加一個DIV 然后DIV 設置 樣式 text-align:center; 這樣里面就居中了。
第二種思路的：就直接在你的源碼上改 .
a{
text-decoration:none;
font-size:20px;
font-weight:bold;
width:222px;
height:100px;
border:1px solid red;
display:block;
text-align:center
}
這個就行了，因為A標簽不是一個塊級元素 所以 要先 display:block。
7.4 Javascript日期的部分函數
var myDate = new Date(); myDate.getYear(); //獲取當前年份(2位) myDate.getFullYear(); //獲取完整的年份(4位,1970-????) myDate.getMonth(); //獲取當前月份(0-11,0代表1月) myDate.getDate(); //獲取當前日(1-31) myDate.getDay(); //獲取當前星期X(0-6,0代表星期天) myDate.getTime(); //獲取當前時間(從1970.1.1開始的毫秒數) myDate.getHours(); //獲取當前小時數(0-23) myDate.getMinutes(); //獲取當前分鍾數(0-59) myDate.getSeconds(); //獲取當前秒數(0-59) myDate.getMilliseconds(); //獲取當前毫秒數(0-999) myDate.toLocaleDateString(); //獲取當前日期 var mytime=myDate.toLocaleTimeString(); //獲取當前時間 myDate.toLocaleString( ); //獲取日期與時間
7.5 HTML中<input>標簽的type屬性
語法：
<input type="value">
屬性值：
| 值 | 描述 |
|---|---|
| button | 定義可點擊按鈕（多數情況下，用於通過 JavaScript 啟動腳本）。 |
| checkbox | 定義復選框。 |
| file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
| hidden | 定義隱藏的輸入字段。 |
| image | 定義圖像形式的提交按鈕。 |
| password | 定義密碼字段。該字段中的字符被掩碼。 |
| radio | 定義單選按鈕。 |
| reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
| submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
| text | 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符 |
7.6 自定義input[type="checkbox"]的樣式
對復選框自定義樣式，我們以前一直用的腳本來實現，不過現在可以使用新的偽類 :checkbox 來實現。
如果直接對復選框設置樣式，那么這個偽類並不實用，因為沒有多少樣式能夠對復選框起作用。不過，倒是可以基於復選框的勾選狀態借助組合選擇符來給其他元素設置樣式。
很多時候，無論是為了表單元素統一，還是為了用戶體驗良好，我們都會選擇 label 元素和 input[type="checkbox"] 一起使用。當<label>元素與復選框關聯之后，也可以起到觸發開關的作用。
思路：
1. 可以為<label>元素添加生成性內容(偽元素)，並基於復選框的狀態來為其設置樣式； 2. 然后把真正的復選框隱藏起來； 3. 最后把生成內容美化一下。
解決方法：
1，一段簡單的代碼：
<input type="checkbox" id="onlyone" /> <label for="onlyone">onyone!</label>
2. 生成一個偽元素，作為美化版的復選框，先給偽元素添加一些樣式：
input[type="checkbox"] + label::before {
content: "\a0"; /*不換行空格*/
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background-color: silver;
text-indent: .15em;
line-height: .65; /*行高不加單位，子元素將繼承數字乘以自身字體尺寸而非父元素行高*/
}
原來的復選框仍然可見，但是我們先給復選框的勾選狀態添加樣式：
3. 給復選框的勾選狀態添加不同的樣式：
input[type="checkbox"]:checked + label::before {
content: "\2713";
background-color: yellowgreen;
}
4 現在把原來的復選框隱藏：
input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
隱藏原來的復選框時，如果使用 display: none; 的話，那樣會把它從鍵盤 tab 鍵切換焦點的隊列中完全刪除。
於是可采用剪切的方式，讓剪切后的尺寸為零，這樣就隱藏了原來的多選框。
7.7 CSS ::before和::after用來做復選框
::before選擇器在被選元素的內容前面插入內容。
:after 選擇器在被選元素的內容后面插入內容。
它們都必須使用content 屬性來指定要插入的內容（content : "內容，可以為空值";）。如果沒有content屬性來指定內容的話將無效。
基本應用：做一個復選框的效果，由於給定的復選框不好看，所以我們可以先將給定的復選框隱藏掉，然后用before做一個自己想要的復選框出來。
7.8 對JS函數的總結
JS中的函數實際上是一個對象，每個函數都是Function類型實例，而且可以與其他引用類型都一樣具有屬性和方法，由於函數是對象，因此函數名實際上是一個指向函數對象的指針，可以作為變量指向其他函數對象，也可以作為其他函數的返回值。
常用的函數定義方式有兩種
一種是聲明式定義，如下：
function sum (num1, num2) {
return num1 + num2;
}
一種是表達式定義，如下：
var sum = function(num1, num2){
return num1 + num2;
};
7.9 對js基礎的總結：
通常，通過 JavaScript，您需要操作 HTML 元素。
1、通過 id 找到 HTML 元素
2、通過標簽名找到 HTML 元素
3、通過類名找到 HTML 元素
提示：通過類名查找 HTML 元素在 IE 5,6,7,8 中無效。
var x=document.getElementById("intro");
var y=document.getElementsByTagName("p");
①、改變 HTML 元素的內容 (innerHTML)
document.getElementById(id).innerHTML=new HTML
②、改變 HTML 屬性
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
③、改變 HTML 樣式
document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>
④、添加或刪除 HTML 元素
7.10 對JS中變量，常量的總結
JS中與變量常量聲明相關的關鍵字有var，let和const。其中let和const是ES6的新特性。var和let都是用來聲明變量的，不同的是var聲明的變量會有一個一個作用域提升的效果，var聲明的變量會被提升到當前作用域的最前面，它的作用域范圍也就是當前作用域，即使它是在語句塊中聲明。而let聲明的變量就沒有作用域提升的效果，它聲明的變量會綁定當前語句塊（暫時性死區，temporal dead zone，簡稱TDZ），被聲明之后才可以使用，只在聲明所在的塊級作用域內有效。const關鍵字用來聲明常量，同時它聲明的常量也和let一樣不存在作用域提升的效果。
function foo(){
//if中的聲明語句會被提升到這里
//var a;
if(false) {
var a = 1;
}
a = 10;
console.log(a);//10
}
function bar(){
{
console.log(b); //ReferenceError: can't access lexical declaration `b' before initialization
let b = 2;
}
console.log(b); //ReferenceError: b is not defined
}
function baz(){
{
const c = 2;
}
console.log(c); //ReferenceError: c is not defined
}