面試撤龆疲考點(diǎn)TAB切換案例（重點(diǎn)面試案例的復(fù)習(xí)）：
tab復(fù)習(xí).gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{
width:350px;
height:300px;
border:1px solid #ccc;
margin:100px auto;
}
.mt span{
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.mt span.current{
background-color: purple;
}
.mb li{
width: 100%;
height:270px;
background-color: purple;
display:none;
}
.mb li.show{
display:block;
}
</style>
<script>
window.onload= function(){
var spans = document.getElementsByTagName("span");//得到所有的span
var lis = document.getElementsByTagName("li");//得到所有l(wèi)i
for(var i=0;i<spans.length;i++)
{
spans[i].index = i;
spans[i].onmouseover = function(){
//清除所有的span類
//清除所有的li 的類
for(var j=0;j<spans.length;j++)
{
spans[j].className ="";
lis[j].className ="";
}
//留下自己
this.className ="current";
//this.index 是span 的索引號 被li使用了
lis[this.index].className ="show"
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="mt">
<span class="current">新聞</span>
<span>體育</span>
<span>娛樂</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新聞模塊</li>
<li> 體育模塊</li>
<li> 娛樂模塊</li>
<li>八卦模塊</li>
</ul>
</div>
</div>
</body>
</html>
以上方法僅限一個(gè)TAB欄的使用蕴侣。而多個(gè)TAB欄時(shí)就需要封裝如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{
width:350px;
height:300px;
border:1px solid #ccc;
margin:100px auto;
}
.mt span{
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.mt span.current{
background-color: purple;
}
.mb li{
width: 100%;
height:270px;
background-color: purple;
display:none;
}
.mb li.show{
display:block;
}
</style>
<script>
window.onload= function(){
// 要想多個(gè)盒子不相互影響，我們可以通過id給他們分開
//封裝 tab欄切換函數(shù)
function tab(obj){
var target = document.getElementById(obj);
var spans = target.getElementsByTagName("span");
var lis = target.getElementsByTagName("li");
for(var i=0;i<spans.length;i++)
{
spans[i].index = i;
spans[i].onmouseover = function(){
for(var j=0;j<spans.length;j++)
{
spans[j].className = "";
lis[j].className = "";
}
this.className="current";
lis[this.index].className ="show";
}
}
}
tab("one");
tab("two");
tab("three")
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="mt">
<span class="current">新聞</span>
<span>體育</span>
<span>娛樂</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新聞模塊</li>
<li> 體育模塊</li>
<li> 娛樂模塊</li>
<li>八卦模塊</li>
</ul>
</div>
</div>
<div class="box" id="two">
<div class="mt">
<span class="current">新聞</span>
<span>體育</span>
<span>娛樂</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新聞模塊</li>
<li> 體育模塊</li>
<li> 娛樂模塊</li>
<li>八卦模塊</li>
</ul>
</div>
</div>
<div class="box" id="three">
<div class="mt">
<span class="current">新聞</span>
<span>體育</span>
<span>娛樂</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新聞模塊</li>
<li> 體育模塊</li>
<li> 娛樂模塊</li>
<li>八卦模塊</li>
</ul>
</div>
</div>
</body>
</html>
兩個(gè)小循環(huán)
◆循環(huán) for(初始化; 條件; 增量){}
◆while() 當(dāng) do {} while()
◆ while(條件) { 語句 }
案例：從1+100是 5050
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 從1+100是 5050
var sum = 0,sum1 = 0,sum2=0;
//for循環(huán)
for(var i= 1;i<=100;i++)
{
sum+=i;
}
console.log(sum);
/*while(條件)
{
語句;
}*/
var j =1;
while(j<=100)
{
sum1+=j;
j++;
}
console.log(sum1);
//do循環(huán)
var k =1;
do{
sum2 += k;
k++;
}
while(k<=100);
console.log(sum2);
</script>
</body>
</html>
do while 至少執(zhí)行一次 while 不一定
多分支語句 switch
switch 跟 if else if 和 else if else 幾乎一樣的 但是switch效率更好狈惫。
作用其實(shí)就是 ： 多選1 ·· 從多個(gè)里面選1個(gè) 睛蛛。
語法格式：
switch(參數(shù))
{
case 參數(shù)1：
語句;
break; 退出的意思
case 參數(shù)2：
語句;
break; 退出的意思
........
default: 默認(rèn)的
語句;
}
案例：查詢物品價(jià)格
查詢價(jià)格.gif
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
//獲取元素
var txt = document.getElementById("txt");
var btn= document.getElementById("btn");
btn.onclick= function(){
var val = txt.value;
switch(val)
{
case"蘋果":
alert("蘋果的價(jià)格是：5元");
break;
case"香蕉":
alert("香蕉的價(jià)格是：2元");
break;
case"梨子":
alert("梨子的價(jià)格是：1.5元");
break;
case"大白菜":
alert("大白菜的價(jià)格是：5元");
break;
default :
alert("今天沒進(jìn)貨");
}
}
}
</script>
</head>
<body>
<input type ="text" id="txt"/> <button id="btn">查詢價(jià)格</button>
</body>
</html>
下拉菜單的事件 onchange
sele.onchange = function(){}
當(dāng)改變的時(shí)候 事件
案例：下拉菜單換膚
下拉菜單換膚.gif
案例所需素材：鏈接：http://pan.baidu.com/s/1gfJnD4Z 密碼：pemq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:url("images/chun.jpg") no-repeat;
}
</style>
<script>
window.onload = function(){
var sele = document.getElementById("sele");
sele.onchange = function(){
//alert(this.value);
switch(this.value)
{
case"1":
document.body.style.backgroundImage ="url(images/chun.jpg) no-repeat";
break;
case"2":
document.body.style.backgroundImage="url(images/xia.jpg)";
break;
case"3":
document.body.style.backgroundImage="url(images/qiu.jpg)";
break;
case"4":
document.body.style.backgroundImage="url(images/dong.jpg) ";
break;
}
}
}
</script>
</head>
<body>
<select name="" id="sele">
<option value="1">春意綿綿</option>
<option value="2">夏日炎炎</option>
<option value="3">秋風(fēng)瑟瑟</option>
<option value="4">冬雪皚皚</option>
</select>
</body>
</html>
案例：騰訊網(wǎng)的星座運(yùn)勢
星座運(yùn)勢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:350px;
height:250px;
border:1px solid #ccc;
margin:100px auto;
}
.dt{
padding-left:10px
line-height:35px;
font-weight:700;
color:#036;
}
.dd-t{
overflow:hidden;
}
.dd{
padding:10px;
}
.icon{
width:50px;
height:50px;
float:left;
background:url(images/icon.png) no-repeat;
}
.yunshi{
width:80px;
height:13px;
display:inline-block;
background:url(images/yunshi.png) no-repeat;
position:relative;
}
.star{
width:60px;
height:13px;
position:absolute;
top:0;
left:0;
background:url(images/yunshi.png) no-repeat left bottom;
}
</style>
<script>
window.onload=function(){
//獲取元素
function $(id){return document.getElementById(id);}
var arr=[10,9,6,9,7];// 存放運(yùn)勢
$("stAr").style.width = arr[0]*8+"px";//第一個(gè)白羊座的運(yùn)勢
var txtArr =["白羊座的內(nèi)容","金牛座的內(nèi)容","雙子座的內(nèi)容"] ; //我的盒子一共是80像素 一共分成10份 每一份8像素
var sele = document.getElementById("sele");
sele.onchange= function(){
//alert(this.value);
$("ico").style.backgroundPosition="0"+(-this.value*50) + "px"; //索引號乘以 50 的關(guān)系 但是 是負(fù)數(shù)
$("stAr").style.width = arr[this.value]* 8 +"px";
//索引號乘以50的關(guān)系 但是 是負(fù)數(shù)
$("content").innerHTML = txtArr[this.value];
}
}
</script>
</head>
<body>
<div class="box">
<div class="dt">星座運(yùn)勢</div>
<div class="dd">
<div class="dd-t">
<div class="icon" id="ico"></div>
<div class="right">
<select name="" id="sele">
<option value="0">白羊座 03.21-04.19</option>
<option value="1">金牛座 04.20-05.29</option>
<option value="2">雙子座 05.30-06.29</option>
</select>
<div>今日運(yùn)勢：
<span class="yunshi">
<span class="star" id="stAr"></span>
</span>
</div>
</div>
</div>
</div>
<div class="dd-b" id="content">
今天你的直覺靈感非常豐富鹦马，能夠幫你洞悉到很多真相胧谈，消化心中的一些秘密心事。然而今天你也心情...[詳細(xì)]</div>
</div>
</div>
</body>
</html>
數(shù)組常用方法
◆ push荸频、pop
◆shift菱肖、unshift
◆concat、join旭从、split
-
添加 數(shù)組
var arr =[1,3,5];
- push() ★★★★★ 后面推進(jìn)去
push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素稳强，并返回新的長度场仲。
push 推進(jìn)去 放
var arr =[1,3,5] → arr.push(7) → 結(jié)果變成 : [1,3,5,7];
2.unshift() 從數(shù)組的前面放入
unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度
var arr = [1,3,5] → arr.unshift(0) → 結(jié)果變成 [0,1,3,5]
注意：var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是 數(shù)組的長度 4
-
刪除數(shù)組內(nèi)容
- pop() 刪除最后一個(gè)元素
pop() 移除最后一個(gè)元素
返回值 是 返回最后一個(gè)值
var arr = [1,3,5] → arr.pop() → 結(jié)果 [1,3]
- shift() 刪除第一個(gè)元素
shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除退疫，并返回第一個(gè)元素的值
var arr = [1,3,5] → arr.shift() → 結(jié)果 [3,5]
-
連接兩個(gè)數(shù)組
concat()
該方法用于連接兩個(gè)或多個(gè)數(shù)組渠缕。它不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本
var aa = [1,3,5]; var bb = [“a”,”b”,”c”];
aa.concat(bb);
結(jié)果： [1,3,5,“a”,”b”,”c”];
-
join() 把數(shù)組轉(zhuǎn)換為字符串
join()
作用是將數(shù)組各個(gè)元素是通過指定的分隔符進(jìn)行連接成為一個(gè)字符串褒繁。
語法
arrayObject.join(separator)
數(shù)組名.join(符號)
數(shù)組轉(zhuǎn)換為字符串
參數(shù) separator 可選亦鳞。指定要使用的分隔符。如果省略該參數(shù)棒坏，則使用逗號作為分隔符燕差。
var arr = [1,2,3];
console.log(arr.join(“-”)) 結(jié)果就是： 1-2-3 字符串
-
把字符串轉(zhuǎn)換為數(shù)組 split()
join <=> split
split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組
語法
stringObject.split(separator,howmany)
參數(shù) separator 可選。指定要使用的分隔符坝冕。如果省略該參數(shù)徒探，則使用逗號作為分隔符。
howmany 可選喂窟。該參數(shù)可指定返回的數(shù)組的最大長度
兩個(gè)符號一致
上述源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr =[1,3,5];
arr.push(7,9);// 把7 9放到arr數(shù)組后面
console.log(arr);//驗(yàn)證
/*對比測試*/
var dom=[1,3,5];
console.log(dom.push(7)); //返回的是數(shù)組長度 4
//前面放入
var demo =[1,3,5];
demo.unshift(0);
console.log(demo);
//刪除組
var arrdele = [1,3,5];
console.log(arrdele.pop()); //返回的是5
arrdele.pop(); // 刪除3
console.log(arrdele);//結(jié)果是1
//連接
var aa= [1,3,5]; var bb=["a","b"];
console.log(aa.concat(bb));//結(jié)果是[1,3,5,"a","b"]
// 數(shù)組轉(zhuǎn)換為字符
var txt= ["aa","bb","cc"];
console.log(txt.join("-")); //結(jié)果是 aa-bb-cc
console.log(txt); //數(shù)組本身不會(huì)改變
//字符轉(zhuǎn)換為數(shù)組
var txt = "aa,bb,cc";
console.log(txt.split(","));
</script>
</body>
<html>
