一，項目題目: 實作“todolist項目”
該項目主要可以練習js操控dom事件，事件觸發之間的邏輯關系，以及如何寫入緩存，擷取緩存、固定。
二，todolist簡介
ToDoList是一款非常優秀的任務管理軟體，使用者可以用它友善地組織和安排計劃。該軟體短小精悍，僅有一個 數百 KB 的可執行檔案就能完成所有功能，并且界面設計優秀，初級使用者也能夠快速上手。
todolist具體功能
ToDoList 幫你把要做的事情列出來，一項一項，類似思維導圖。
最明顯的好處是強迫自己整理出任務的每個部分，理順後按部就班的完成，提高效率。
當然了習慣是需要慢慢養成了，開始使用 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屬性所設定的快捷鍵不能與浏覽器的快捷鍵沖突，否則将優先激活浏覽器的快捷鍵。
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
}
不經一番徹骨寒 怎得梅花撲鼻香