什么是json，json是一種數據格式，例如圖片切換，有圖片，有文字，之前的做法是存在數組里，json更好一點
***
### 語法及遍歷
~~~
<script>
var json = {'name1':'張三','name2':'李四'}
for(attr in json){
alert(attr + " " + json[attr]);
}
</script>
~~~
課堂回顧練習：圖片切換（使用json存路徑和文字描述）
課堂練習-1：省市聯動（二維數組，json）
***
### 數組添加元素
~~~
<script>
var arr = [1,2,3];
// arr.push(4);//將4添加到數組的最后面
// alert(arr.push(4));//返回4，4是長度還是元素？
alert(arr.push('abc'));//返回還是4
// push的確是添加元素，但是返回值是長度
// 在數組前面添加
// arr.unshift(0);
// alert(arr);//0,1,2,3
alert(arr.unshift(0));//依舊返回長度，IE6,7不支持返回值
</script>
~~~
### 數組刪除元素
~~~
<script>
var arr = ['張三','李四','王五','趙六','田七'];
// arr.pop();//扔掉最后一個元素
// alert(arr.pop());//返回扔掉的元素
// arr.shift();//扔掉第一個元素
alert(arr.shift());//依然返回扔掉的元素
</script>
~~~
### splice方法
~~~
<script>
//splice有刪除、替換、添加功能
var arr = ['張三','李四','王五','趙六','田七'];
//刪除第0位，刪除1個，從第幾個干掉幾個
// arr.splice(0,1);//'李四','王五','趙六','田七'
// 替換
// arr.splice(0,1,'leo');//'leo','李四','王五','趙六','田七'
// arr.splice(0,2,'leo');//'leo','王五','趙六','田七'
// 添加
// arr.slice(1,0,'周八');//'張三','周八'，'李四','王五','趙六','田七'
// 第二個參數如果是1，會把李四干掉，添加可以多個
// alert(arr.splice(0,2));//返回刪除掉的倆
// alert(arr.splice(0,2,'aaa'));//依舊返回刪除的倆
</script>
~~~
***
### 數組的去重
~~~
<script>
var arr = [1,2,2,4,2];
for(var i = 0;i <arr.length;i++){
for(var j = i + 1;j < arr.length;j++){
if(arr[i] == arr[j]){
arr.splice(j,1);//會去修改數組長度，循環會減少
j--;
}
}
}
alert(arr);
</script>
~~~
### 隨機排序（打亂）
~~~
<script>
var arr = [1,2,3,4,5,6,7,8];
arr.sort(function (a,b) {
return Math.random() - 0.5;
});
alert(arr);
</script>
~~~
***
課堂練習-2：隨機切換廣告
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;}
ul,li{list-style: none;}
ul{width: 220px;margin:200px auto;}
li{
width: 100px;
height: 50px;
float:left;
margin-right: 10px;margin-bottom: 5px;
overflow: hidden;
position: relative;
}
div{
width: 100px;
font-size: 0;
position: absolute;
left:0;
top:0;
}
</style>
<script src="js/neusoft.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i = 0;i < aLi.length;i++){
imgTab(aLi[i]);
}
function imgTab(li){
var oDiv = li.getElementsByTagName('div')[0];
oDiv.tab = setInterval(function(){
oDiv.target = parseInt(getStyle(oDiv,'top')) == -50?0:-50;
doMove(oDiv,'top',10,oDiv.target);
},(Math.random()*4+1)*1000);
}
}
</script>
</head>
<body>
<ul>
<li>
<div id="">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/9.jpg" alt="" />
<img src="img/10.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/11.jpg" alt="" />
<img src="img/12.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/13.jpg" alt="" />
<img src="img/14.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/15.jpg" alt="" />
<img src="img/16.jpg" alt="" />
</div>
</li>
</ul>
</body>
</html>
~~~
拓展練習：消除表情小游戲
***
[圖片素材下載](https://pan.baidu.com/s/11Luvx0SiX71Zk01lpSUS_g)
