第六天

陣列基礎

字面量建立：var arr1=[2,1,3,6,5,4,7,9,8];
物件例項化建立：var arr2=new Array(“a”,“b”);
物件建立法：var arr3=new Object([1,2,3,4]);//一般不這麼使用，陣列是由物件建立完成

1.資料新增刪除時，length將會時時產生改變；
2.如果new Array(引數)，引數有且僅有一個，並且是一個正整數時，這個引數表示建立若干個空元素在陣列中，也就是設定陣列的長度；
3.如果是負數或者小數時，就會報錯；
4.如果是非數值，就會將這個引數作為陣列的第0項元素新增進入；
5.Array.isArray() //判斷元素是否是陣列
6.陣列也是物件的一種，因此，變數也是獲得陣列在堆中的引用地址；

陣列.length

陣列.length //陣列的長度
陣列.length //設定值
1.如果設定的值比當前的長度大，就會將當前的陣列長度設為這個值，多出來的新增空值彌補；
2.如果設定的值小於當前的長度，其實就是刪除陣列後面元素，直到需要保留的長度位數；
3.如果設定的值為0，就表示清空陣列；

var arr=[1,2,3];
arr=[];//千萬不能使用，因陣列中值未能清除，會漂浮在堆中，造成記憶體洩漏
arr.length=0; //清空陣列

物件陣列和二維陣列

var data=[      //定義一個二維陣列
           {id:1001,icon:"img/1.png",
 
name:"餐飲0",num:1,price:10},          
           {id:1002,icon:"img/2.png",name:"餐飲1",num:1,price:20},
        ];

陣列中的方法

concat

arr.concat(元素)； 原陣列不改變，在尾部新增一個新元素，並且返回這個生成的新陣列
arr.concat(元素1，元素2，元素3)； 原陣列不改變，在尾部新增多個新元素，並且返回這個生成的新元素
arr.concat(陣列) 原陣列不改變，合併陣列，新增的陣列在尾部，並且返回這個生成的新陣列
arr.concat(陣列1，陣列2)

原陣列不改變，合併陣列，新增的陣列在尾部，並且返回這個生成的新陣列
arr.concat() 複製陣列，形成新的陣列與原陣列無引用關係

push、unshift 返回值：新陣列的長度

在頭部新增比尾部新增複雜，當是大資料量處理時，可先 倒序–>在尾部新增–>倒序
arr.push(6) 向尾部新增一個數值
arr.push(6,7,8,9) 向尾部新增多個數值
**arr.unshift(6)**向頭部新增一個數值
arr.unshift(6,7,8,9); 向頭部新增多個數值
var len=arr.push(6); //arr.push(6)返回值為新陣列的長度
var len=arr.push(6,7,8,9);
var len=arr.push([6,7,8,9]);//push一個數組，這裡會把這個陣列當成一整個元素新增進去
var len=arr.unshift(0); //向頭部新增一個數值
var len=arr.unshift(0,-1,-2); //向頭部新增多個數值

pop、shift 刪除陣列尾部、頭部元素，並且將被刪除的元素返回

var item=arr.pop(); //刪除arr陣列的尾部元素，並且將被刪除的元素返回給item
var item=arr.shift(); //刪除陣列頭部元素，並且將被刪除的元素返回
【注】陣列中若有物件的話不可用arr.length()=0 因物件還沒刪除，會在堆中游離，解決方法如下：
* 用pop將物件刪為null，可改為：
* 1.將i++刪除，data.shift();
* 2.for(var i=0;i<len;i++){
* data[0]=null;
* data.shift();
* }
* 3.for(var i=0;i<len;i++){
* data[data.length-1]=null;
* data.pop();
* }
* 為什麼不直接使用 delete data[i]遍歷刪除？
* delete將陣列變為鬆散型陣列，刪除每個元素未按照緊密型陣列進行補位，所以資料為empty,但長度不變。

splice 返回的陣列是被刪除元素的集合陣列

  arr1=arr.splice();不做任何操作，返回一個空陣列
  * 陣列遷徙
  * arr1=arr.splice(0);從第0位開始刪除所有元素，並且將這個被刪除的元素返回給新陣列
  *arr.splice(-1)  刪除陣列的最後一個元素，這裡的負數，是從後向前計數
  *
  *刪除元素
  * arr.splice(2,2);  從第二位開始刪除緊鄰其後的2個元素,返回被刪除的2個元素陣列
  *
  * 插入元素
  * arr.splice(2,0,-1,-2); 從第二位開始，不刪除元素，插入-1，-2
  *
  * 替換元素
   * arr.splice(2,2,-1,-2); 從第二位開始，刪除2個元素，插入-1，-2，
  *                         相當於將第二位開始後面兩個元素替換為-1，-2

【注】splice用的不多，用起來麻煩，效率較低，陣列過大時不可用
* 刪除的效率最慢，新增的效率最快
* 刪除並不是真的刪除，而是新增新陣列

將不用陣列設為null，防止記憶體洩漏

 var arr5=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        /*
        * 錯誤寫法：
        *       因為len會隨著arr.splice的執行而逐漸變小，會出現找到一個符合的值而跳過下一個值的現象
        var len=arr5.length;
       for(var i=0;i<len;i++){
           if(arr5[i]%2===0 || arr5[i]%3===0){
                 arr5.splice(i,1);      //當arr陣列元素能被2或者3整除時，用splice將此元素刪除，並將刪除後的集合元素陣列返回
           }
       }*/
        var arr6=[];
        for(var i=0;i<arr5.length;i++){
            if(arr5[i]%2!==0 && arr5[i]%3!==0){
                arr6.push(arr5[i]);     //當陣列元素不能被2並且不能被3整除時，將arr5的元素放至arr6中
            }
        }
        arr5=arr6.concat();
        arr6=null;
      console.log(arr5);

查詢

/* if(!~arr.indexOf(11)){//沒找到

        }
 if(~arr.indexOf(3)){//找到

}*/

indexOf() 在陣列中查詢元素，如果找到，返回該元素所在的下標，如果沒找到返回-1;
lastIndexOf() 在陣列中從後向前查詢元素，如果找到，返回該元素所在的下標，如果沒找到返回-1;

尋找陣列值為3時的下標

var arr1=[1,2,3,4,3,2,4,3,1,2,5,3,4,1,3];
       /* var index=-1;
       while (true){
           index=arr1.indexOf(3,index+1);   //從index+1位置開始遍歷，尋找陣列值為3時的下標
           console.log(index);
           if(index===-1){
               break;
           }
       }*/

去重

 var arr2=[];
       for(var i=0;i<arr1.length;i++){
           var bool=false;
           for(var j=0;j<arr2.length;j++){
               if(arr2[j]===arr1[i]){
                   bool=true;
                   break;
               }
           }
           if(!bool){
               arr2.push(arr1[i]);
           }
       }

//      for(var i=0;i<arr1.length;i++){
//          if(arr2.indexOf(arr1[i])===-1){
//                arr2.push(arr1[i]);
//          }
//      }
        arr1=arr2.concat();
        arr2=null;
        console.log(arr1);

---

第七天

join

join() 用逗號作為分隔符連線為字串
join(“符號或者字元”) 用符號或者字元作為分隔符連線
join("") 將陣列中所有元素首尾相連為字串

reverse 實際上reverse就是做了一個翻轉陣列

sort 排序

從小到大

function sortFun(a,b){
	return a-b;
}

從大到小

function sortFun(a,b){
	return b-a;
}

以第一個字元的位元組碼作為大小進行升序排列

arr.sort(function(a,b){
	return a.charCodeAt(0)-b,charCodeAt(0);
});

隨機產生長度為5的陣列

第一種方法：
var arr=[];
while(true){
	var num=pareInt(Math.random()*100);
	if(arr.indexOf(num)===-1){
		arr.push(num);
	}
	if(arr.length===5){
		break;
	}
}
console.log(arr);

第二種方法：
var arr=[];
for(var i=0;i<100;i++){
	arr.push(i);
}
//隨機亂序
arr.sort(function(){
	return Math.random()-0.5;
});
arr.length=5;
console.log(arr);

reduce 求和

陣列.reduce(function(和值,當前項,當前下標,陣列自身){ return 返回值})
sum初始是陣列的第0項
item就是從第一項開始
下標也是從1開始
不管需不需要求和，都必須返回sum值

var a=arr1.reduce(function (sum,item,index,list) {  //定義陣列求和屬性reduce
//            console.log(sum,item,index,list);
            return sum+item;
        });
        var b=arr.reduce(function (sum,item,index) {    //定義陣列求和屬性reduce
            if(index%2===0){        //若當前下標（下標從1開始）能被2整除，返回下標為偶數項的和
                return sum+item;
            }else {
                return sum;     //若不能被2整除，返回和值（不進行相加）
            }
        });
        console.log(b);

arr.filter(function(當前項，當前下標，當前陣列){return 條件})
將符合條件的元素返回到新陣列的中

var arr2=arr.filter(function (item,index,list) {     //將arr陣列篩選後的值賦給arr2
            return item>7;
        });
        console.log(arr2);

遍歷
* item 當前元素
* index 當前下標
* list 當前陣列
* forEach(function(item,index,list){})
* map(function(item,index,list){})
*
* 1、forEach 沒有返回值，不能直接修改item，可以通過list修改，也可以修改
* item的屬性
* 2、map 可以得到返回的新陣列，這個陣列的所有元素，都是通過遍歷陣列時，
* return 返回的值，如果沒有返回就是undefined。這裡可以直接通過return返回修改後的item值

//定義forEach遍歷，無返回值
arr.forEach(function (item,index,list) {
   if(index%2===0){
         item.price+=100;	//item不可直接修改，可通過list修改，也可修改item屬性
   }
});
       console.log(data);*/
      arr.forEach(function (item,index,list) {
           if(index%2===0){
//                list[index]=item+10;
//                item不能直接修改
           }
      });

var arr1=arr.map(function (item,index) {
       if(index%2===0){
             return item+10;
       }else{
           return item;
      }
});

slice

// var arr1=arr.slice();//複製陣列，無引用關係
// var arr1=arr.slice(1);//從某個元素開始到結尾所有元素複製到新陣列中
// var arr1=arr.slice(-3);//從後向前數第3個元素到結尾的所有元素複製到新陣列中
// var arr1=arr.slice(1,3);//從第1個元素到第3個元素之前的所有元素複製到新陣列中
// var arr1=arr.slice(-3,-1);//從後向前第3個元素到最後1個元素之前的所有元素複製到新陣列中
// var arr1=arr.slice(-5,8);//從後向前第5個元素到順序數第8個元素的所有元素複製到新陣列中

arguments

任何函式中都有一個區域性變數arguments
arguments不能使用陣列的任何方法

String物件

字串的length是隻讀的，不可以寫入值
str[0] 方式也是隻讀的，不可以寫入值
連線和編碼
// 字串連線concat()可以連線多個字串
// str=str.concat(“e”,“xyz”,s,“px”);
var str2=“azAZ09”;
** 將字串中指定位置的字元轉換為編碼**
/* console.log(str2.charCodeAt(0));
console.log(str2.charCodeAt(1));
console.log(str2.charCodeAt(2));
console.log(str2.charCodeAt(3));
console.log(str2.charCodeAt(4));
console.log(str2.charCodeAt(5));*/
將編碼轉換為字元console.log(String.fromCharCode(97));
// 驗證碼 分流
// 多臺計算同時訪問一個伺服器—併發

---

作業

1.將陣列[1,2,3,1,2,4,2,1,3,2,1,4],去重，有小到大排列順序，氣泡排序

function sort(arr){
            var len=arr.length;
            var value;
            for(var i=len;i>0;i--){
                for(var j=0;j<i-1;j++){
                    if(arr[j]>arr[j+1]){
                        value=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=value;
                    }
                }
            }
            return arr;
        }

2.寫一個函式，引數是陣列[“a”,“b”,“c”,“d”,“a”,“b”,“d”,“a”,“d”,“c”,“a”]，以物件的形式記錄該陣列元素重複次數

 var arr=["a","b","c","d","a","b","d","a","d","c","a"];
       console.log(getRepeatObject(arr));
       function getRepeatObject(arr) {
           var obj={};
           for(var i=0;i<arr.length;i++){
               if(!obj[arr[i]]){
                   obj[arr[i]]=1;
               }else{
                   obj[arr[i]]++;
               }
           }
           return obj;
       }

3.將物件型陣列 [{name:“xie”,age:20},{name:“zhang”,age:18},{name:“wang”,age:26}]變成字串?name=xie&age=20|name=zhang&age=18|name=wang&age=26;寫函式生成

var  arr1=[{name:"xie",age:20},{name:"zhang",age:18},{name:"wang",age:26}];
        
       function arrayToString(arr) {
           var str="?";
           for(var i=0;i<arr.length;i++){
               for(var prop in arr[i]){
                   str+=prop+"="+arr[i][prop]+"&";
               }
               str=str.slice(0,-1);
               if(i<arr.length-1){
                   str+="|";
               }
           }
           return str;
       }

       console.log(arrayToString(arr1));

---

第八天

查詢與替換

if(!~str.indexOf("a")){
            //沒找到
        }
if(str.indexOf("a")>-1){
            //找到了
 }

// str.lastIndexOf(“a”);//從後向前查詢
// console.log(str.search(“a”));//和indexOf類似，也是返回查詢到元素的下標,但是這個方法一般應用於正則
// console.log(str.match(“a”));//錯誤,僅應用於正則
// str=str.replace(“a”,“e”);//將a字元替換為e字元，返回修改後新的字串，原字串不變化
// 暫時我們使用replace替換元素，只能替換第一次被查詢到的元素，如果要替換多個元素，就需要用正則
大小寫

var str="abc";
str=str.toUpperCase();//轉為大寫
str=str.toLowerCase();//轉為小寫
console.log(str);

在輸入框中選中小寫字母時，將小寫字母轉為大寫

var texts=document.getElementById("texts");

texts.addEventListener("select",selectHandler);
        function selectHandler(e) {
            e=e || window.event;
//        input中如果使用select事件，selectionStart可以獲得當前選擇開始位置，
//            selectionEnd獲得當前選擇的結束位置
//            console.log(texts.selectionStart, texts.selectionEnd);
            var str0=texts.value.slice(0,texts.selectionStart);
            var str1=texts.value.slice(texts.selectionStart,texts.selectionEnd);
            var str2=texts.value.slice(texts.selectionEnd);
            texts.value=str0+str1.toUpperCase()+str2;
        }

split 將字串切割成陣列，和join相對

var str=arr.join("|");  //將陣列以|相連線為字串
var arr1=str.split("|");   //將字串以|切割為陣列

獲取位址列中的資訊，以物件的形式返回

var url="http://www.qq.com/index.php?user=xietian&password=123456&age=30&sex=man";
   		console.log(getObject(url));

        function getObject(str) {
            var arr=str.split("?")[1].split("&");
            var obj={};
            for(var i=0;i<arr.length;i++){
                var arr1=arr[i].split("=");
                obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
            }
            return obj;
        }

數學方法
Math.abs(); 求絕對值
Math.ceil(); 向上取整，有小數就進位取整
Math.floor(); 向下取整，捨去小數位
Math.round(); 四捨五入
.toFixed(); 保留小數位數，四捨五入
parseInt(); 向下取整
Math.max(); 求最大值
Math.min(); 求最小值
求最大值

var max=Math.max.apply(null,arr);

求最小值

var min=Math.min.apply(null,arr);

Math.sqrt(); 平方根
Math.pow(); 求冪
Math.pow(2,5);和1<<5一樣，但是後者更好
Math.pow(9.0.5);和Math.sqrt(2);和Math.SQRT2一樣，最後一個最好
Math.random(); 生成0-1的隨機數
Number.MAX_VALUE 大於零的最大值
Number.MIN_VALUE 大於零的最小值
Number.NEGATIVE_INFINITY 正無窮
Number.POSITIVE_INFINITY 負無窮
Date
console.log(date.getFullYear());
console.log(date.getMonth());//從0開始
console.log(date.getDate());//日期
console.log(date.getDay());//星期,星期日是0
console.log(date.getHours());//小時
console.log(date.getMinutes());//分鐘
console.log(date.getSeconds());//秒
console.log(date.getMilliseconds());//毫秒.1000=1秒
console.log(date.getTime());//1970.1.1 0 到現在的毫秒數
時間戳

var url="....";
url+="?time="+new Date().getTime();
console.log(url);

獲取時間

<div id="div0"></div>
    <script>
        var div=document.getElementById("div0");
        var obj=getObject(location.search);
        var time=0;
        if(obj.time){
            time=obj.time;
        }
        var nowDate=new Date();
        nowDate.setHours(20);
        nowDate.setMinutes(0);
       var id=setInterval(animation,1000);
        function animation() {
            document.write(time);
            document.write("<br>");
            time--;
            if(time<0){
                clearInterval(id);
            }
//            var date=new Date();
//            div.innerHTML=Math.floor((nowDate-date)/1000);
        }

        function getObject(str) {
            var arr=str.split("?")[1].split("&");
            var obj={};
            for(var i=0;i<arr.length;i++){
                var arr1=arr[i].split("=");
                obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
            }
            return obj;
        }

作業

1.將價格隨機修改為0-100任意整數，修改num為1-10任意整數，計算總價
1、統計總價大於200元的物件
2、統計單價大於50元的物件總價之和
3、按照總價排序由高到低
4、生成表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0}
        table{border-collapse: collapse}
        td,th{border: 1px solid #000000;width: 100px;height: 30px;line-height: 30px;text-align: center}
    </style>
</head>
<body>
<table id="table"></table>
    <script>
        /*2、var data=[
            {id:1001,icon:"img/1.png",name:"餐飲0",num:1,price:10},
            {id:1002,icon:"img/2.png",name:"餐飲1",num:1,price:20},
            {id:1003,icon:"img/3.png",name:"餐飲2",num:1,price:30},
            {id:1004,icon:"img/4.png",name:"餐飲3",num:1,price:40},
            {id:1005,icon:"img/5.png",name:"餐飲4",num:1,price:50},
            {id:1006,icon:"img/6.png",name:"餐飲5",num:1,price:60},
            {id:1007,icon:"img/7.png",name:"餐飲6",num:1,price:70},
            {id:1008,icon:"img/8.png",name:"餐飲7",num:1,price:80},
            {id:1009,icon:"img/9.png",name:"餐飲8",num:1,price:90},
            {id:1010,icon:"img/10.png",name:"餐飲9",num:1,price:100}
        ];
        var data=[
            {id:1001,icon:"img/1.png",name:"餐飲0",num:1,price:10},
            {id:1002,icon:"img/2.png",name:"餐飲1",num:1,price:20},
            {id:1003,icon:"img/3.png",name:"餐飲2",num:1,price:30},
            {id:1004,icon:"img/4.png",name:"餐飲3",num:1,price:40},
            {id:1005,icon:"img/5.png",name:"餐飲4",num:1,price:50},
            {id:1006,icon:"img/6.png",name:"餐飲5",num:1,price:60},
            {id:1007,icon:"img/7.png",name:"餐飲6",num:1,price:70},
            {id:1008,icon:"img/8.png",name:"餐飲7",num:1,price:80},
            {id:1009,icon:"img/9.png",name:"餐飲8",num:1,price:90},
            {id:1010,icon:"img/10.png",name:"餐飲9",num:1,price:100}
        ];

        data.forEach(function (t) {
            t.price=parseInt(Math.random()*101);
            t.num=parseInt(Math.random()*10+1);
            t.sum=t.price*t.num;
        });
       var list=data.filter(function (t) {
            return t.sum>200;
        });
       var sum=data.reduce(function (sum,item) {
            if(item.price>50){
               return sum+item.sum;
            }else{
                return sum;
            }
       },0);
        data.sort(function (a,b) {
            return b.sum-a.sum;
        });
        var table=document.getElementById("table");
        table.innerHTML=createTable(data);
        
        function createTable(list) {
            var str="";
            str+="<tr>";
            for(var prop in list[0]){
                str+="<th>"+prop+"</th>";
            }
            str+="</tr>";
            for(var i=0;i<list.length;i++){
                str+="<tr>";
                for(var s in list[i]){
                    str+="<td>"+list[i][s]+"</td>"
                }
                str+="</tr>";
            }
            return str;
        }
    </script>
</body>
</html>

第九天

作業

1.寫一個倒計時，通過位址列中增加&time獲取當前的分鐘,設定新的時間date.setMinutes(date.getMinutes()+time);通過時間間隔函式每次獲取當前的時間，
讓當前時間的秒數-設定的時間秒數，並且按照分鐘顯示出來

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/Method.js"></script>
</head>
<body>
<div id="div0"></div>
   <script>
       //定義變數
       var div,
           id,
           date;
       //呼叫初始函式init
       init();
       /*
       * 初始化函式init（）的作用：
       *       傳入未來時間，定義定時器，使程式碼標準化
       *  引數：
       *       無參
       * 功能：
       *       1、獲取div標籤；
       *       2、定義時間物件；
       *       3、定義增加時間變數；
       *       4、呼叫函式獲取URL資訊，並轉換為物件；
       *       5、若轉換後的物件存在，並且有time屬性及值，將物件的time值賦給time；
       *       6、將現在的時間加上增加的時間賦給設定的時間（分鐘）；
       *       7、以1000ms為間隔設定計時器。
       *
       * */
      function init() {
           div=document.getElementById("div0");
           date=new Date();
           var time=0;
           var obj=Method.getURLObject(location.search);
           if(obj && obj.time){
               time=obj.time;
           }
           date.setMinutes(date.getMinutes()+time);
           id=setInterval(animation,1000);
      }
      /*
      * 計時器函式作用：
      *
      * */
      function animation() {
           var now=new Date();
           var value=date-now;
           if(value<0){
               clearInterval(id);
               return;
           }
           value=Math.round(value/1000);
           var m=Math.floor(value/60);
           var s=value%60;
           div.innerHTML=m+":"+s;
      }
      
     /* function getURLObject(url) {
          if(!~url.indexOf("?")) return;
          url=url.split("?")[1];
          var obj={};
          var arr;
          var arr1;
          var bool=false;
          if(!~url.indexOf("&")){
               if(!~url.indexOf("=")) return;
               arr=url.split("=");
               obj[arr[0]]=isNaN(Number(arr[1])) ? arr[1] : Number(arr[1]);
               return obj;
          }
          arr=url.split("&");
          for(var i=0;i<arr.length;i++){
               if(!~arr[i].indexOf("=")) continue;
               arr1=arr[i].split("=");
              if(arr1[0].length===0) continue;
               obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
               bool=true;
          }
          if(bool) return obj;
      }*/
   </script>
</body>
</html>

2.將當前時間顯示出來，每秒變化都需要顯示，div.innerHtml=“時間”
將所有的阿拉伯數值以中文數值顯示

<div id="div0"></div>
<script>
	var div;
	var numberArr=["零","一","二","三","四","五","六","七","八","九","十"];
	var weekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
	init();
	function init(){
		div=document.getElementById("div0");
		setInterval(animation,1000);
	}
	function animation(){
		var date=new Date();
		var year=date.getFullYear();
		var month=date.getDate();
		var week=date.getDay();
		var hours=date.getHours();
		var minutes=date.getMinutes();
		var seconds=date.getSeconds();
		var str=hours<5?"凌晨":(hours<12?"上午":(hours<14?“中午”:(hours<18?"下午":"晚上")))；
		div.innerHTML=getYear(year)+年+getChinaNumber(month+1)+"月"+getChinaNumber(day)+"日"+weekArr[week]+"  "+str+"  "+getChinaNumber(hours)+"點"+getChinaNumber(minutes)+“分"+getChinaNumber(seconds)+"秒"
	}
	function getYear(year){
		var str="";
		year=String(year);
		for(var i=0;i<year.length;i++){
			str+=numberArr[Number(year[i])];	
		}
		return str;
	}
	function getChinaNumber(num){
		if(num>=100)return;
		if(num<11)return numberArr[num];
		if(num%10===0){
			return numberArr[num/10]+“十”;
		}
		if(num<20){
			return "十"+numberArr[num%10];
		}
		return numberArr[Math.floor(num/10)]+"十"+numberArr[num%10];
	}
	</script>

DOM獲取
nodeType 節點型別
nodeName 節點名稱
nodeValue 節點值

var div=document.getElementById("div0");//根據ID名獲取
div.n=5;//這種定義的屬性都是物件屬性
getElementsByTagName();//根據標籤名
getElementsByClassName();//根據class
getElementsByName();//根據name獲取
querySelector();//根據選擇器來查詢第一個元素
querySelectorAll();//根據選擇器來查詢所有元素

節點遍歷

document.body.children;//獲取子元素
document.body.childNodes;//獲取子節點

document.body.parentElement;//父元素
document.body.parentNode;//父節點

document.body.firstElementChild;//第一個子元素
document.body.firstChild;//第一個子節點

document.body.lastElementChild;//最後一個子元素
document.body.lastChild;//最後一個子節點

document.body.nextElementSibling;//下一個兄弟元素，弟弟
document.body.nextSibling;//下一個兄弟節點，弟弟

document.body.previousElementSibling;//上一個兄弟元素，哥哥
doucment.body.previousSibling;//上一個兄弟節點，哥哥

DOM節點操作

document.createElement("div");//根據標籤建立元素

document.body.appendChild(div);//將元素插入在DOM物件中的尾部

document.createTextNode("文字內容");//建立文字節點

div.insertBefore(span,text);//插入什麼元素前面，第一個引數是新元素，第二個引數是插入的位置

img.cloneNode(true/false);//深複製true,複製元素包括它的子元素；淺複製false，只複製該元素；若ID重複，複製完成後如果有ID，需要更換

div.replaceChild(p,imgs);//替換元素，（新元素，要替換的舊元素）

div.removeChild(p);//父級要刪除子級元素
img.remove();//自己刪除自己，自殺

第十天

碎片容器

var ul=document.createElement("ul");
        document.body.appendChild(ul);
//        建立碎片容器,就像一個膠囊，提升效率
//		
        var temp=document.createDocumentFragment();
        for(var i=0;i<100;i++){
            var li=document.createElement("li");
            temp.appendChild(li);
        }
        ul.appendChild(temp);

物件屬性

var div0=document.getElementById("div0");
div0.num=5;

標籤屬性

//        設定元素標籤屬性，age是屬性名，30是值，要求值必須是字元
        div0.setAttribute("age","30");
//        獲取標籤屬性，值是字元
        console.log(div0.getAttribute("age"));
//        刪除標籤屬性
        div0.removeAttribute("class");

物件的樣式和屬性

    //IE8及以下不支援
//    console.log(getComputedStyle(div).width);
    //IE8以下支援
//     console.log(div.currentStyle.width);

用try…catch解決

var width;
    try {
        width=getComputedStyle(div).width;
    }catch (e){
        width=div.currentStyle.width;
    }
    console.log(width);

判斷解決

if(div.currentStyle){
            width=div.currentStyle.width;
        }else{
            width=getComputedStyle(div).width;
        }

DOM常見屬性
寬高

clientHeight    //width+padding-滾動條寬度、高度
offsetHeight    //width+padding+border
scrollHeight    //容器內滾動範圍的寬度和高度（如果沒有滾動，減去滾動條高度）

//        預設狀態,頁面寬度-margin*2   高度 0
//        console.log(document.body.clientWidth,document.body.clientHeight);
//        瀏覽器頁面的寬度，瀏覽器頁面的高度
//        console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
//        瀏覽器頁面被撐開的寬度和高度，實際內容的寬高
//        console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);

位置、左上頂角的位置

不能設定，只讀：
clientLeft/clientTop    //border的寬度
offsetLeft/offsetTop    //邊線外到父級容器的距離，如果父級容器沒有定位，就會到再上層的父級位置
可以設定：
scrollLeft/scrollTop    //設定頁面滾動條

獲取到距離頁面的位置和offset的寬高
getBoundingClientRect();

小案例——小球點選移動/停止

css:
div{
	width:50px;
	hiight:50px;
	background-color:red;
	position:absolute;
}
html:
<div></div>
js:
var div;
init();
function init(){
	div=document.querySelector("div");
	div.bool=false;
	setInterval(animation,16);
	div.addEventListener("click",clickHandler);
}
function animation(){
	if(!div.bool)return;
	div.style.left=div.offsetLeft+2+"px";
}
function clickHandler(e){
	this.bool=!this.bool;
}

小案例——回到頂部，不用錨點

css:
div{
	width:50px;
	height:50px;
	background-color:gray;
	position:fixed;
	right:50px;
	bottom:50px;
	line-height:50px;
	text-align:center;
	cursor:default;
}
html:
	<div>TOP</div>
js:
	var div;
	var bool=false;
	init();
	function init(){
		div=document.querySelector("div");
		for(var i=0;i<300;i++){
			Method.createElem("p",document.body,i);//已經封裝好的函式，可用於建立元素，具體見自己Method庫
		}
		div.addEventListener("click",clickHandler);
		setInterval(animation,16);
	}
	function animation(){
		if(！bool)return;
		if(document.documentElement.scrollTop<=0){
			bool=false;
			return;
		}
		document.documentElement.scrollTop-=300;
	}
	function clickHandler(e){
		e=e||window.event;
		bool=true;
	}

作業

1、留言薄,ul做介面，下方有文字框，點選按鈕建立li，li裡面內容是文字框的值，
右側有小×，點選可以刪除當前的li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        var ul=document.createElement("ul");
        document.body.appendChild(ul);
        ul.style.width="800px";
        ul.style.height="400px";
        ul.style.border="1px solid #000000";
        ul.style.padding="0";
        ul.style.listStyle="none";
        var input=document.createElement("input");
        input.type="text";
        input.style.width="720px";

        document.body.appendChild(input);
        var bn=document.createElement("button");
        bn.textContent="留言";
        bn.style.width="78px";
        document.body.appendChild(bn);
        bn.addEventListener("click",clickHandler);
        ul.style.paddingRight="5px";
        function clickHandler(e) {
            e=e || window.event;
//            去除字串前後空格
            if(input.value.trim().length===0) return;
            var li=document.createElement("li");
            li.textContent=input.value;
            li.style.fontSize="20px";
            var a=document.createElement("a");
            a.style.cursor="default";
            a.style.float="right";
            a.innerHTML="&times;";
            a.addEventListener("click",removeClickHandler);
            li.appendChild(a);
            ul.appendChild(li);
            input.value="";
        }

        function removeClickHandler(e) {
            e=e || window.event;
            this.parentElement.remove();
        }
    </script>
</body>
</html>