開發「todolist「」項目及其本身的感悟
一，項目題目: 實現「todolist項目」
該項目主要能夠練習js操控dom事件，事件觸發之間的邏輯關係，以及如何寫入緩存，獲取緩存、固定。javascript
二，todolist簡介
ToDoList是一款很是優秀的任務管理軟件，用戶能夠用它方便地組織和安排計劃。該軟件短小精悍，僅有一個 數百 KB 的可執行文件就能完成全部功能，而且界面設計優秀，初級用戶也可以快速上手。css
todolist具體功能
三，項目需求：
本項目參考了http://www.todolist.cn/點擊打開連接，對代碼進行了一些精簡，並添加了一些功能。在實現項目的過程當中，首先是實現最基本的功能，而後不斷地添加加強功能和美化。html
參考連接http://www.todolist.cn/ 1.將用戶輸入添加至待辦項 2.能夠對todolist進行分類（待辦項和已完成組），用戶勾選既將待辦項分入已完成組 3.todolist的每一項可刪除和編輯 4.下方有clear按鈕，並清空全部todolist項
四，小編所作的靜態頁面
最終成型的結果：醜是醜了點，將就着看唄前端
五，基礎HTML和CSS準備
5.1：input元素標籤的用法
一個簡單的HTML表單，包含兩個文本輸入框，一個提交按鈕。html5
總結Input的標籤：（input標籤用於蒐集用戶信息）java
Input表示Form表單中的一種輸入對象，其又隨Type類型的不一樣而分文本輸入框，密碼輸入框，單選/複選框，提交/重置按鈕等。python
1，type=text
輸入類型是text，這是咱們見的最多也是使用最多的， 好比登錄輸入用戶名，註冊輸入電話號碼，電子郵件，家庭住址等等。 固然這也是Input的默認類型。 參數name：一樣是表示的該文本輸入框名稱。 參數size：輸入框的長度大小。 參數maxlength：輸入框中容許輸入字符的最大數。 參數value：輸入框中的默認值 特殊參數readonly：表示該框中只能顯示，不能添加修改。
代碼格式：c++
<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
此密碼輸入框，就是輸入的信息是保密字符。api
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的異同
一、section和div均可以對內容進行分塊，可是section是進行有意義的分塊，無心義的分塊應該由div來作，例如用做設置樣式的頁面容器。
二、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 元素。
一、經過 id 找到 HTML 元素
二、經過標籤名找到 HTML 元素
三、經過類名找到 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
}
- 1. 對項目開發的一些感悟
- 2. 項目答辯的感悟
- 3. 本身對團隊開發項目的意見以及項目需求分析
- 4. 一個項目組長的感悟（一）
- 5. 接手一個老項目的感悟
- 6. 智能農業項目的感悟
- 7. 八年Java開發的感悟：什麼纔是程序員的立身之本
- 8. 海思開發感悟
- 9. web開發之感悟篇
- 10. 遊戲開發感悟
- 更多相關文章...
- • MySQL的版本以及版本號 - MySQL教程
- • Mozilla 項目 - 瀏覽器信息
- • PHP開發工具
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 對項目開發的一些感悟
- 2. 項目答辯的感悟
- 3. 本身對團隊開發項目的意見以及項目需求分析
- 4. 一個項目組長的感悟（一）
- 5. 接手一個老項目的感悟
- 6. 智能農業項目的感悟
- 7. 八年Java開發的感悟：什麼纔是程序員的立身之本
- 8. 海思開發感悟
- 9. web開發之感悟篇
- 10. 遊戲開發感悟