多重條件判斷語(yǔ)句
- if語(yǔ)句
語(yǔ)法：
if(條件表達(dá)式){
語(yǔ)句...
}else if(條件表達(dá)式){
語(yǔ)句...
}else if(條件表達(dá)式){
語(yǔ)句...
}else{
語(yǔ)句...
}
if...else if...else
當(dāng)該語(yǔ)句執(zhí)行時(shí)，會(huì)從上到下依次對(duì)條件表達(dá)式進(jìn)行求值判斷
如果值為true猜欺，則執(zhí)行當(dāng)前語(yǔ)句屋摔。
如果值為false，則繼續(xù)向下判斷替梨。
如果所有的條件都不滿足钓试，則執(zhí)行最后一個(gè)else后的語(yǔ)句
該語(yǔ)句中，只會(huì)有一個(gè)代碼塊被執(zhí)行副瀑，一旦代碼塊執(zhí)行了弓熏，則直接結(jié)束語(yǔ)句
var today = 4;
if(today == 1){
alert('語(yǔ)文');
}else if(today == 2){
alert('數(shù)學(xué)');
}else if(today == 3){
alert('英語(yǔ)');
}else if(today == 4){
alert('美術(shù)');
}else if(today == 5){
alert('舞蹈');
}else{
alert('不補(bǔ)習(xí)');
}
條件分支語(yǔ)句也叫switch語(yǔ)句
語(yǔ)法：
switch(條件表達(dá)式){
case 表達(dá)式:
語(yǔ)句...
break;
case 表達(dá)式:
語(yǔ)句...
break;
default:
語(yǔ)句...
break;
}
執(zhí)行流程：
switch...case..語(yǔ)句
在執(zhí)行時(shí)會(huì)依次將case后的表達(dá)式的值和switch后的條件表達(dá)式的值進(jìn)行全等比較，
如果比較結(jié)果為true糠睡，則從當(dāng)前case處開(kāi)始執(zhí)行代碼挽鞠。
當(dāng)前case后的所有的代碼都會(huì)執(zhí)行，我們可以在case的后邊跟著一個(gè)break關(guān)鍵字狈孔，
這樣可以確保只會(huì)執(zhí)行當(dāng)前case后的語(yǔ)句信认，而不會(huì)執(zhí)行其他的case
如果比較結(jié)果為false，則繼續(xù)向下比較
如果所有的比較結(jié)果都為false均抽，則只執(zhí)行default后的語(yǔ)句
switch語(yǔ)句和if語(yǔ)句的功能實(shí)際上有重復(fù)的嫁赏，使用switch可以實(shí)現(xiàn)if的功能，同樣使用if也可以實(shí)現(xiàn)switch的功能油挥，所以我們使用時(shí)潦蝇，可以根據(jù)自己的習(xí)慣選擇。
var today = 4;
switch(today){
case 1:
alert('語(yǔ)文');
break;//結(jié)束整個(gè)switch語(yǔ)句
case 2:
alert('數(shù)學(xué)');
break;
case 3:
alert('英語(yǔ)');
break;
case 4:
alert('美術(shù)');
break;
case 5:
alert('舞蹈');
break;
default:
alert('不補(bǔ)習(xí)');
break;//最后一個(gè)default可以不寫(xiě)break深寥，但建議寫(xiě)上
}
數(shù)組
-
面向?qū)ο蟮姆绞絼?chuàng)建
var aRr01 = new Array(1,2,3,'abc'); -
直接創(chuàng)建
var aRr02 = [1,2,3,'def'];//推薦使用攘乒，性能更高 -
獲取數(shù)組的成員數(shù)量（長(zhǎng)度）
alert(aRr02.length);//彈出4 alert(aRr02[3]);//彈出cdf var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]]; alert(aRr03.length);//彈出3 alert(aRr03[1].length);//彈出3 alert(aRr03[1][2]);//彈出c
數(shù)組常用方法
var aRr = [1,2,3,4];
-
用-連接數(shù)組元素并轉(zhuǎn)為字符串
var aRr = [1,2,3,4]; var sTr = aRr.join("-");//用-連接數(shù)組元素并轉(zhuǎn)為字符串，彈出1-2-3-4 -
用空串連接
var aRr = [1,2,3,4]; var sTr = aRr.join(''); alert(sTr);//彈出1234 -
向數(shù)組最后追加元素
var aRr = [1,2,3,4]; aRr.push(5); alert(aRr);//1,2,3,4,5 -
刪除末尾元素
var aRr = [1,2,3,4]; aRr.pop(); alert(aRr);//1,2,3 -
向最前面插入元素0
var aRr = [1,2,3,4]; aRr.unshift(0); alert(aRr);//0,1,2,3,4 -
刪除第一個(gè)（索引為0的）元素
var aRr = [1,2,3,4]; aRr.shift(); alert(aRr);//2,3,4 -
反轉(zhuǎn)
var aRr = [1,2,3,4]; aRr.reverse(); alert(aRr);//4,3,2,1 -
查找字母'b'第一次出現(xiàn)的索引
var aRr2 = ['a','b','c','d','a','b','c','d']; var num = aRr2.indexOf('b'); alert(num);//1 -
從第2索引元素開(kāi)始惋鹅，刪除1個(gè)元素
var aRr = [a,b,c,d]; aRr2.splice(2,1);//刪除c alert(aRr2);//a,b,d,a,b,c,d -
從第2索引元素開(kāi)始则酝，刪除1個(gè)元素，再插入e
var aRr = [a,b,c,d]; aRr2.splice(2,1,'e');//把c替換成e alert(aRr2);//a,b,e,d,a,b,c,d -
刪除后面的abcd闰集，改為fghi
var aRr = [a,b,c,d]; aRr2.splice(4,4,'f','g','h','i'); alert(aRr2);//a,b,c,d,f,g,h,i
通過(guò)標(biāo)簽獲取元素
-
獲取頁(yè)面上所有的li
var aLi = document.getElementsByTagName('li'); -
獲取id為list01的ul
var oList = document.getElementById('list01'); -
再獲取這個(gè)ul下的所有l(wèi)i
var aLi = oList.getElementsByTagName('li'); alert(aLi.length);//8 -
指定索引處的li設(shè)定背景顏色
aLi[0].style.backgroundColor = 'gold'; aLi[1].style.backgroundColor = 'gold'; } </script> </head> <body> <ul id="list01"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
循環(huán)語(yǔ)句
循環(huán)語(yǔ)句：
通過(guò)循環(huán)語(yǔ)句可以反復(fù)的執(zhí)行一段代碼多次
while循環(huán)
- 語(yǔ)法：
while(條件表達(dá)式){
語(yǔ)句...
}
- while語(yǔ)句在執(zhí)行時(shí)沽讹，
先對(duì)條件表達(dá)式進(jìn)行求值判斷，
如果值為true返十，則執(zhí)行循環(huán)體妥泉，
循環(huán)體執(zhí)行完畢以后，繼續(xù)對(duì)表達(dá)式進(jìn)行判斷
如果為true洞坑，則繼續(xù)執(zhí)行循環(huán)體盲链，以此類推
如果值為false，則終止循環(huán)
do...while循環(huán)
- 語(yǔ)法：
do{
語(yǔ)句...
}while(條件表達(dá)式)
- 執(zhí)行流程：
do...while語(yǔ)句在執(zhí)行時(shí)迟杂，會(huì)先執(zhí)行循環(huán)體刽沾，
循環(huán)體執(zhí)行完畢以后，在對(duì)while后的條件表達(dá)式進(jìn)行判斷排拷，
如果結(jié)果為true侧漓，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推
如果結(jié)果為false监氢，則終止循環(huán)
實(shí)際上這兩個(gè)語(yǔ)句功能類似布蔗，不同的是while是先判斷后執(zhí)行藤违，
而do...while會(huì)先執(zhí)行后判斷，
do...while可以保證循環(huán)體至少執(zhí)行一次纵揍，
而while不能
for語(yǔ)句顿乒，也是一個(gè)循環(huán)語(yǔ)句，也稱為for循環(huán)
在for循環(huán)中泽谨，為我們提供了專門(mén)的位置用來(lái)放三個(gè)表達(dá)式：
1.初始化表達(dá)式
2.條件表達(dá)式
3.更新表達(dá)式
for循環(huán)的語(yǔ)法：
for(①初始化表達(dá)式;②條件表達(dá)式;④更新表達(dá)式){
③語(yǔ)句...
}
for循環(huán)的執(zhí)行流程：
①執(zhí)行初始化表達(dá)式璧榄，初始化變量（初始化表達(dá)式只會(huì)執(zhí)行一次）
②執(zhí)行條件表達(dá)式，判斷是否執(zhí)行循環(huán)吧雹。
如果為true骨杂，則執(zhí)行循環(huán)③
如果為false，終止循環(huán)
④執(zhí)行更新表達(dá)式雄卷，更新表達(dá)式執(zhí)行完畢繼續(xù)重復(fù)②
任意一種循環(huán)都可以互相嵌套
-
創(chuàng)建一個(gè)循環(huán)搓蚪，往往需要三個(gè)步驟
1.創(chuàng)初始化一個(gè)變量var j = 0;
2.在循環(huán)中設(shè)置一個(gè)條件表達(dá)式
while(j < aLi.length){
aLi[j].style.background = 'gold';
3.定義一個(gè)更新表達(dá)式，每次更新初始化變量
j++;
-
以下是死循環(huán)的寫(xiě)法
像這種將條件表達(dá)式寫(xiě)死為true的循環(huán)龙亲，叫做死循環(huán)
該循環(huán)不會(huì)停止陕凹，除非瀏覽器關(guān)閉，死循環(huán)在開(kāi)發(fā)中慎用
可以使用break鳄炉，來(lái)終止循環(huán)while(true){ if(j>10){ break;//退出整個(gè)循環(huán) } j++; } //for循環(huán)的死循環(huán)寫(xiě)法 for(;;){
break關(guān)鍵字可以用來(lái)退出switch或循環(huán)語(yǔ)句
不能在if語(yǔ)句中使用break和continue
break關(guān)鍵字杜耙，會(huì)立即終止離他最近的那個(gè)循環(huán)語(yǔ)句
continue關(guān)鍵字可以用來(lái)跳過(guò)當(dāng)次循環(huán)
同樣continue也是默認(rèn)只會(huì)對(duì)離他最近的循環(huán)循環(huán)起作用
-
可以為循環(huán)語(yǔ)句創(chuàng)建一個(gè)label，來(lái)標(biāo)識(shí)當(dāng)前的循環(huán)
label:循環(huán)語(yǔ)句
使用break語(yǔ)句時(shí)拂盯，可以在break后跟著一個(gè)label佑女，
這樣break將會(huì)結(jié)束指定的循環(huán)，而不是最近的outer: for(var i=0 ; i<5 ; i++){ console.log("@外層循環(huán)"+i); for(var j=0 ; j<5; j++){ console.log("內(nèi)層循環(huán):"+j); break outer; } } }
數(shù)組去重
<script type="text/javascript">
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
var aRr2 = [];
for(var i=0; i<aRr.length; i++){
//判斷元素第一次出現(xiàn)的位置谈竿，恰好是當(dāng)前索引時(shí)团驱，就將元素放入新數(shù)組
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
</script>
字符串處理的方法
-
字符串切斷轉(zhuǎn)成數(shù)組.split('-')
var sTr = '2018-06-20'; var aRr = sTr.split('-'); alert(aRr);//2018,06,20 -
修改<title>標(biāo)簽的內(nèi)容
document.title = aRr2; -
獲取指定索引的字符.charAt(0)
var sTr2 = '#div1'; var sTr3 = '.div1'; /*獲取指定索引的字符*/ var sTr4 = sTr2.charAt(0); if(sTr4 == '#'){ // alert('id選擇器'); } -
查看子串第一次出現(xiàn)的位置
var sTr5 = 'Microsoft Yahei'; var num = sTr5.indexOf('Yahei'); alert(num);//10 var num2 = sTr5.indexOf('xihei'); alert(num2);//沒(méi)有找到就彈出-1 -
substring截取子串
var sTr5 = 'Microsoft Yahei'; 從10開(kāi)始，截到15（包括開(kāi)始位置空凸，不包括結(jié)束位置） var sTr6 = sTr5.substring(10,15);//Yahei 從10開(kāi)始截取到末尾 var sTr6 = sTr5.substring(10);//Yahei alert(sTr6); -
全部轉(zhuǎn)為大寫(xiě)字母
alert(sTr6.toUpperCase());//YAHEI -
全部轉(zhuǎn)為小寫(xiě)字母
alert(sTr6.toLowerCase());//yahei
字符串反轉(zhuǎn)
1嚎花、split字符串轉(zhuǎn)成數(shù)組
2、reverse數(shù)組反轉(zhuǎn)
3呀洲、join數(shù)組轉(zhuǎn)成字符串
<script type="text/javascript">
var sTr = "123asdf79888asdfe21";
//1紊选、split字符串轉(zhuǎn)成數(shù)組
//2、reverse數(shù)組反轉(zhuǎn)
//3道逗、join數(shù)組轉(zhuǎn)成字符串
var sTr2 = sTr.split('').reverse().join('');
alert(sTr2);//12efdsa88897fdsa321
</script>
定時(shí)器的基本用法
setTimeout 只執(zhí)行一次的定時(shí)器
clearTimeout 關(guān)閉只執(zhí)行一次的定時(shí)器
setInterval 反復(fù)執(zhí)行的定時(shí)器
clearInterval 關(guān)閉反復(fù)執(zhí)行的定時(shí)器
單次定時(shí)器
var timer = setTimeout(function(){
alert('hello!');
}, 3000);
清除單次定時(shí)器
clearTimeout(timer);
反復(fù)循環(huán)定時(shí)器
var timer2 = setInterval(function(){
alert('hi~~~');
}, 2000);
清除反復(fù)循環(huán)定時(shí)器
clearInterval(timer2);
定時(shí)器彈框
定時(shí)器動(dòng)畫(huà)
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
position: fixed;
left: 20px;
top: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var left = 20;
反復(fù)循環(huán)定時(shí)器兵罢，每30毫秒修改一次盒子的left值
var timer = setInterval(function(){
left += 2;
oBox.style.left = left + 'px';
當(dāng)left值大于700時(shí)停止動(dòng)畫(huà)（清除定時(shí)器）
if(left > 700){
clearInterval(timer);
}
},30);
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
定時(shí)器制作時(shí)鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時(shí)鐘</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
function timeGo(){
var now = new Date();
// alert(now);//彈出美式時(shí)間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
var year = now.getFullYear();//2018年
var month = now.getMonth() + 1;//6月彈出5//范圍0-11
var date = now.getDate();//20號(hào)
var week = now.getDay();//3//星期幾，西半球時(shí)間滓窍，范圍0-6卖词，星期日為一周的第一天，為0
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// alert(hour + ":" + minute + ":" + second);//15:33:9
oBox.innerHTML = '當(dāng)前時(shí)間是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
}
timeGo();
setInterval(timeGo, 1000);
}
//此函數(shù)將星期的數(shù)字轉(zhuǎn)為漢字表示
function toWeek(num){
switch(num){
case 0:
return '星期天';
break;
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
}
}
//此函數(shù)將不足兩位的數(shù)字前面補(bǔ)0
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
定時(shí)器倒計(jì)時(shí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計(jì)時(shí)</title>
<script type="text/javascript">
window.onload = function(){
//活動(dòng)第二天要將頁(yè)面下線吏夯，直接跳轉(zhuǎn)到其它頁(yè)面此蜈，不會(huì)走后面的代碼了
// window.location.;
var oDiv = document.getElementById('div1');
function timeLeft(){
//實(shí)際開(kāi)發(fā)中此時(shí)間從服務(wù)器獲取即横，避免客戶端調(diào)整時(shí)間
var now = new Date();
var future = new Date(2018,5,20,16,30,20);
/ alert(future - now);//彈出與當(dāng)前時(shí)間相差的毫秒數(shù)：12469935436
var milli = parseInt((future - now)/1000);
活動(dòng)當(dāng)天頁(yè)面下線，避免倒計(jì)時(shí)到點(diǎn)后繼續(xù)計(jì)負(fù)時(shí)
/if(milli <= 0){
// /頁(yè)面跳轉(zhuǎn)舶替，不執(zhí)行下面的代碼了
/ window.location.;
/ }
var day = parseInt(milli / 86400);
var hour = parseInt(milli % 86400 / 3600);
var minute = parseInt(((milli % 86400) % 3600) / 60);
var second = milli % 60;
oDiv.innerHTML = '距離2018年11月12日00時(shí)00分00秒還有' + day + '天' + toDouble(hour) + '時(shí)' + toDouble(minute) + '分' + toDouble(second) + '秒';
}
timeLeft();
setInterval(timeLeft, 1000);
}
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
變量的作用域
全局變量：函數(shù)外部定義的變量令境，函數(shù)內(nèi)部和外部都可以訪問(wèn)，它的值可以共享
局部變量：函數(shù)內(nèi)部定義的變量顾瞪，函數(shù)內(nèi)部可以訪問(wèn)，外部無(wú)法訪問(wèn)抛蚁。函數(shù)內(nèi)部訪問(wèn)變量時(shí)陈醒，先在內(nèi)部查找是否有此變量，如果有瞧甩，就使用內(nèi)部變量钉跷，如果沒(méi)有，就去外部查找
函數(shù)內(nèi)部如果不用'var'關(guān)鍵字定義變量肚逸，變量可能會(huì)變成全局變量爷辙，如果用嚴(yán)格模式解析會(huì)報(bào)錯(cuò)
封閉函數(shù)
-
原來(lái)的寫(xiě)法
function myAlert(){ var str = '歡迎訪問(wèn)我的主頁(yè)'; alert(str); } myAlert();*/ -
封閉函數(shù)的一般寫(xiě)法
var str = function(){ alert('test'); } -
封閉函數(shù)定義：(function(){……})()
;;(function(){ var str = '歡迎訪問(wèn)我的主頁(yè)'; alert(str); })();//最后的()表示馬上執(zhí)行
封閉函數(shù)其他的寫(xiě)法：在匿名函數(shù)前加“！”或者“~”朦促，之后加“()”
~function(){
var str = '歡迎訪問(wèn)我的主頁(yè)';
alert(str);
}();
用變量的方式定義函數(shù)
-
原來(lái)的寫(xiě)法：可以提前
myAlert(); function myAlert(){ alert('hello!'); }*/ -
函數(shù)用變量方式定義：先定義再使用
myalert();//提前會(huì)報(bào)錯(cuò) var myAlert = function(){ alert('hello!'); } myAlert();//放在下面可以執(zhí)行
閉包
本質(zhì)就是函數(shù)嵌套膝晾，就是在函數(shù)里面定義函數(shù)，
內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量
參數(shù)和變量不會(huì)被垃圾回收機(jī)制給回收
閉包的用途：可以存循環(huán)的索引值务冕、做私有變量計(jì)數(shù)器
-
閉包的一般寫(xiě)法
function aa(b){ var a = 12; function bb(){ alert(a); alert(b); } return bb; } var cc = aa(24); -
閉包的封閉函數(shù)寫(xiě)法
var cc = (function(b){ var a = 12; function bb(){ alert(a); alert(b); } return bb; })(24); cc(); -
只能調(diào)用一次的閉包
(function(b){ var a = 12; function bb(){ alert(a); alert(b); } return bb; })(24)();
