array.push:給數(shù)組最后增加元素
數(shù)據(jù)類型
1.對(duì)象（[ ],{ },null）object
2.數(shù)字number
3.字符串string
4.函數(shù)function
5.未定義undefined
6.布爾booleam
字符串轉(zhuǎn)換成數(shù)字
Number（）
Number是整體轉(zhuǎn)化
Number（function（）{}）；//轉(zhuǎn)化為NaN，非數(shù)字
Number（['']）;//0
Number（[1,2,3]）;//NaN
Number（{}）;//NaN
Number（null）;//0
對(duì)象和有多個(gè)數(shù)據(jù)的數(shù)組都會(huì)轉(zhuǎn)化為NaN
parseInt：解析成整數(shù)，只能轉(zhuǎn)字符串，其他的都不能轉(zhuǎn)；從左到右一位一位的看，如果遇到非數(shù)字就停止，也認(rèn)一些數(shù)字：如 空格，+，-，10px
parseFloat（浮點(diǎn)數(shù)）：可以轉(zhuǎn)化小數(shù)，認(rèn)小數(shù)
隱式類型轉(zhuǎn)換
在做加法時(shí)，如果有字符串，會(huì)將我的操作數(shù)都變成字符串，然后再相加 如：'1'+1;//11
"-"：會(huì)轉(zhuǎn)換成數(shù)字 如 '10'-1;//9
- ,/ ,% ,*:都會(huì)轉(zhuǎn)換成數(shù)字
字符串比較：'9'<'10';//false 是一位一位的比較 先比較9<1
NaN
NaN：not a number 不是個(gè) 數(shù)字 的 數(shù)字類型
NaN 可以看成是false
NaN自己和自己都不相等 NaN==NaN是false
isNaN(NaN)是true
封裝函數(shù)
1.先將代碼全部放在函數(shù)中，調(diào)用確?？蛇\(yùn)行
2.修改我的頂點(diǎn)元素，防止外部的影響
3.將變化的信息變成自變量,形成可以定制化的效果
4.html結(jié)果盡量保持一致
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 350px;
float: left;
margin: 50px;
position: relative;
}
img{
width: 100%;
}
ul{
list-style: none;
position: absolute;
top: -10px;
right: -60px;
}
li{
height: 50px;
width: 50px;
background: #ccc;
margin-top: 10px;
}
li.active{
background: yellow;
}
</style>
</head>
<body>
<div class="box" id="box1">
<img src="img/1.png" alt="" class="img1">
<ul>
</ul>
</div>
<div class="box" id="box2">
<img src="img/1.png" alt="" class="img1">
<ul>
</ul>
</div>
<div class="box" id="box3">
<img src="img/1.png" alt="" class="img1">
<ul>
</ul>
</div>
<script>
function changeImgs(oBox ,imgs){
// var arr = ['img/1.png','img/2.png','img/3.png','img/4.png', 'img/4.png', 'img/4.png'];
var arr = imgs;
var oImg = oBox.getElementsByClassName('img1')[0];
var aLi = oBox.getElementsByTagName('li');
var oUl = oBox.getElementsByTagName('ul')[0];
//當(dāng)前的選擇索引
var cur = 0;//第一張圖片
//根據(jù)圖片的個(gè)數(shù)動(dòng)態(tài)的生成li
var str = '';
for(var i=0;i<arr.length;i++){
if(i==cur){
str = str + '<li class="active"></li>';
}
else{
str = str + '<li></li>';
}
}
oImg.src = arr[cur];
oUl.innerHTML = str;
function onSelect(){
//切換圖片
oImg.src = arr[this.index];
//改變按鈕樣式
// this.className = 'active';
//兩種方式：
//第一種： 先清除所有l(wèi)i的class, 然后在點(diǎn)擊的li加上.active
// for(var i=0;i<aLi.length;i++){
// aLi[i].className = '';
// }
// this.className = 'active';
//第二種方法： 先清除之前選擇的li, 然后在點(diǎn)擊的li加上.active
aLi[cur].className = '';
this.className = 'active';
cur = this.index;
}
for(var i=0;i<aLi.length;i++){
//添加點(diǎn)擊函數(shù)
aLi[i].index = i;
aLi[i].onclick = onSelect;
}
}
var oBox = document.getElementById("box1");
var oBox2 = document.getElementById("box2");
var oBox3 = document.getElementById("box3");
changeImgs(oBox, ['img/1.png','img/2.png', 'img/3.png']);
changeImgs(oBox2, ['img/3.png','img/4.png']);
changeImgs(oBox3, ['img/3.png','img/4.png', 'img/1.png']);
//封裝成函數(shù)
1. html結(jié)果盡量保持一致
1. 先將代碼全部放在函數(shù)中， 測(cè)試，確保可運(yùn)行
2. 修改我的頂點(diǎn)元素，防止對(duì)外部的影響
3. 將變化的信息變成自變量，形成可以定制化的效果
</script>
</body>
</html>
