詳解JavaScript的流程控制語(yǔ)句

更新時(shí)間：2015年11月30日 09:22:48 投稿：lijiao

這篇文章主要介紹了JavaScript的流程控制語(yǔ)句，感興趣的小伙伴們可以參考一下

JS的核心ECMAScript規(guī)定的流程控制語(yǔ)句和其他的程序設(shè)計(jì)語(yǔ)言還是蠻相似的。我們選擇一些實(shí)用的例子來(lái)看
一下這些語(yǔ)句。順序結(jié)構(gòu)我們?cè)谶@里就不再提到，直接說(shuō)條件和循環(huán)以及其他語(yǔ)句。
一、條件選擇結(jié)構(gòu)
條件選擇語(yǔ)句用于基于不同的條件來(lái)執(zhí)行不同的動(dòng)作，通常在寫代碼時(shí)，總是需要為不同的決定來(lái)執(zhí)行不同的
動(dòng)作，可以在代碼中使用條件語(yǔ)句來(lái)完成該任務(wù)。
在JavaScript中，我們可使用以下條件語(yǔ)句：
if 語(yǔ)句：只有當(dāng)指定條件為true時(shí)，使用該語(yǔ)句來(lái)執(zhí)行代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語(yǔ)句</title> 
</head> 
 
<body> 
 
<p>如果時(shí)間早于 20:00，會(huì)獲得問(wèn)候 "Good day"。</p> 
 
<button onclick="myFunction()">點(diǎn)擊這里</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var time=new Date().getHours(); 
document.write("當(dāng)前北京時(shí)間："+time); 
function myFunction() 
{ 
 var x=""; 
 if (time<20) 
 { 
  x="Good day"; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 
</script> 
 
</body> 
</html>

運(yùn)行的結(jié)果為：

if...else語(yǔ)句：當(dāng)條件為true時(shí)執(zhí)行代碼，當(dāng)條件為 false 時(shí)執(zhí)行其他代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語(yǔ)句</title> 
</head> 
 
<body> 
 
<p>如果時(shí)間早于 20:00，會(huì)獲得問(wèn)候 "Good day"。如果時(shí)間晚于 20:00，會(huì)獲得問(wèn)候 "Good evening"。</p> 
 
<button onclick="myFunction()">點(diǎn)擊這里</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var time=new Date().getHours(); 
document.write("當(dāng)前北京時(shí)間："+time); 
function myFunction() 
{ 
var x=""; 
if (time<20) 
 { 
 x="Good day"; 
 } 
else 
 { 
 x="Good evening"; 
 } 
document.getElementById("demo").innerHTML=x; 
} 
</script> 
 
</body> 
</html>

運(yùn)行的結(jié)果為：

if...else if....else 語(yǔ)句：使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語(yǔ)句</title> 
</head> 
 
<body> 
 
<p>如果時(shí)間早于 10:00，會(huì)獲得問(wèn)候 "Good morning"。</p> 
<p>如果時(shí)間早于 20:00，會(huì)獲得問(wèn)候 "Good day"。</p> 
<p>如果時(shí)間晚于 20:00，會(huì)獲得問(wèn)候 "Good evening"。</p> 
 
<button onclick="myFunction()">點(diǎn)擊這里</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var time=new Date().getHours(); 
document.write("當(dāng)前北京時(shí)間："+time); 
function myFunction() 
{ 
var x=""; 
if (time<10) 
 { 
 x="Good morning"; 
 } 
else if (time<20) 
 { 
 x="Good day"; 
 } 
else 
 { 
 x="Good evening"; 
 } 
document.getElementById("demo").innerHTML=x; 
} 
</script> 
 
</body> 
</html>

運(yùn)行的結(jié)果為：

switch語(yǔ)句： 使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行。switch 語(yǔ)句用于基于不同的條件來(lái)執(zhí)行不同的動(dòng)作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語(yǔ)句2</title> 
</head> 
 
<body> 
<p>點(diǎn)擊下面的按鈕來(lái)顯示今天是周幾：</p> 
 
<button onclick="myFunction()">點(diǎn)擊這里</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var d=new Date().getDay(); 
document.write("今天的星期代表數(shù)字："+d); 
function myFunction() 
{ var x; 
 switch (d) 
 { 
 case 0: 
 x="Today it's Sunday"; 
 break; 
 case 1: 
 x="Today it's Monday"; 
 break; 
 case 2: 
 x="Today it's Tuesday"; 
 break; 
 case 3: 
 x="Today it's Wednesday"; 
 break; 
 case 4: 
 x="Today it's Thursday"; 
 break; 
 case 5: 
 x="Today it's Friday"; 
 break; 
 case 6: 
 x="Today it's Saturday"; 
 break; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 
</script> 
</body> 
</html>

運(yùn)行的結(jié)果：

default關(guān)鍵字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS流程控制語(yǔ)句2</title> 
</head> 
 
<body> 
<p>點(diǎn)擊下面的按鈕來(lái)顯示今天是周幾：</p> 
 
<button onclick="myFunction()">點(diǎn)擊這里</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var d=new Date().getDay(); 
document.write("今天的星期代表數(shù)字："+d); 
function myFunction() 
{ var x; 
 switch (d) 
 { 
 case 6: 
 x="Today it's Saturday"; 
 break; 
 case 0: 
 x="Today it's Sunday"; 
 break; 
 default: 
 x="Looking forward to the Weekend"; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 
</script> 
</body> 
</html>

運(yùn)行的結(jié)果為：

二、循環(huán)結(jié)構(gòu)
循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。
JavaScript支持不同類型的循環(huán)：
(1)for語(yǔ)句：循環(huán)代碼塊一定的次數(shù)

for(var box=1;box<=10;box++) 
{ 
 document.write("box="+box+"<br/>"); 
}

運(yùn)行的結(jié)果為：

(2)for...in語(yǔ)句：循環(huán)遍歷對(duì)象的屬性

var box={ 
 name:"張三", 
 age:24, 
 sex:"男" 
 }; 
for(x in box) 
{ 
 document.write(box[x]+"<br/>"); 
}

運(yùn)行的結(jié)果為：

(3)while語(yǔ)句：當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊。先判斷，再執(zhí)行語(yǔ)句，這種比較實(shí)用。

var box=1; 
while(box<=5) 
{ 
 document.write("box="+box+"<br/>"); 
 box++; 
}

運(yùn)行的結(jié)果為：

(4)do...while - 同樣當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊。先執(zhí)行一次，再判斷

var box=1; 
do{ 
 document.write("box="+box+"<br/>"); 
 box++; 
}while(box<=10)

運(yùn)行的結(jié)果為：

三、其他語(yǔ)句
(1)break語(yǔ)句：用于跳出循環(huán)。

for(var box=1;box<=10;box++) 
 { 
 if(box==5) 
 { 
 break;//強(qiáng)制退出整個(gè)循環(huán) 
 } 
 document.write("box="+box+"<br/>"); 
 }

運(yùn)行的結(jié)果為：

執(zhí)行到第四次循環(huán)時(shí)不再繼續(xù)執(zhí)行，跳出了真?zhèn)€循環(huán),，輸出的少了box=5以后的循環(huán)。
(2)continue語(yǔ)句：用于跳過(guò)循環(huán)中的一個(gè)迭代。

for(var box=1;box<=10;box++) 
{ 
 if(box==5) 
 { 
 continue;//退出當(dāng)前循環(huán)，還會(huì)繼續(xù)執(zhí)行后面的循環(huán) 
 } 
 document.write("box="+box+"<br/>"); 
}

運(yùn)行的結(jié)果為：

執(zhí)行到第四次循環(huán)時(shí)，跳出第五次循環(huán)，繼續(xù)向下面執(zhí)行，輸出的少了box=5。
(3)with語(yǔ)句：將代碼的作用域設(shè)置到一個(gè)特定的對(duì)象中
先來(lái)看一般我們是怎么樣輸出對(duì)象的屬性的值的：

 var box={ 
 name:"張三", 
 age:24, 
 sex:"男" 
 }; 
 var n=box.name; 
 var a=box.age; 
 var s=box.sex; 
 document.write(n+"<br/>"); 
document.write(a+"<br/>"); 
document.write(s);

運(yùn)行的結(jié)果為：

改用with語(yǔ)句來(lái)寫：

 var box={ 
 name:"張三", 
 age:24, 
 sex:"男" 
 }; 
 with(box){ 
 var n=name; 
 var a=age; 
 var s=sex; 
 }; 
document.write(n+"<br/>"); 
document.write(a+"<br/>"); 
document.write(s);

運(yùn)行的結(jié)果為：

從三大方面介紹了JavaScript的流程控制語(yǔ)句，希望大家仔細(xì)閱讀，數(shù)量掌握J(rèn)avaScript流程控制語(yǔ)句的使用方法。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)三種常用網(wǎng)頁(yè)特效(offset、client、scroll系列)
這篇文章主要為大家介紹了三種常用的PC端網(wǎng)頁(yè)特效：元素偏移量offset系列，元素可視區(qū)client系列和元素滾動(dòng)scroll系列，文中示例代碼介紹詳細(xì)，需要的可以參考一下
2021-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)兼容性好,自動(dòng)置頂?shù)奶詫殤腋」ぞ邫谛Ч?涉及JavaScript動(dòng)態(tài)判斷頁(yè)面元素位置及樣式設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09

javascript 禁止復(fù)制網(wǎng)頁(yè)

常見的一些禁止復(fù)制網(wǎng)頁(yè)的代碼，但破解方法也不見容易，這里就不說(shuō)了，可以看本站以前發(fā)布的文章。

2009-06-06

JavaScript計(jì)算器網(wǎng)頁(yè)版實(shí)現(xiàn)代碼分享

這篇文章主要為大家詳細(xì)介紹了JavaScript計(jì)算器網(wǎng)頁(yè)版實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2016-07-07

手把手教你 CKEDITOR 4 實(shí)現(xiàn)Dialog 內(nèi)嵌 IFrame操作詳解

這篇文章主要介紹了手把手教你 CKEDITOR 4 實(shí)現(xiàn)Dialog 內(nèi)嵌 IFrame操作,結(jié)合實(shí)例形式分析了CKEDitor4 Dialog內(nèi)嵌IFrame具體操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

2019-06-06

JavaScript時(shí)間對(duì)象之常用方法的設(shè)置實(shí)例

這篇文章主要為大家介紹了JavaScript時(shí)間對(duì)象常用方法的設(shè)置實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

2023-05-05

微信小程序整合使用富文本編輯器的方法詳解

這篇文章主要介紹了微信小程序整合使用富文本編輯器的方法,結(jié)合實(shí)例形式分析了微信小程序整合與使用富文本插件WxParse相關(guān)步驟與操作技巧,需要的朋友可以參考下

2019-04-04

javascript 對(duì)象屬性property與元素屬性attribute的瀏覽器支持

對(duì)象屬性property與元素屬性attribute的瀏覽器支持情況，大家可以參考下。

2010-10-10

javascript動(dòng)態(tài)獲取登錄時(shí)間和在線時(shí)長(zhǎng)

這篇文章主要為大家詳細(xì)介紹了javascript動(dòng)態(tài)獲取登錄時(shí)間和在線時(shí)長(zhǎng)的相關(guān)資料，獲得登錄時(shí)候的時(shí)間，用來(lái)和動(dòng)態(tài)的時(shí)間做差來(lái)求時(shí)長(zhǎng)，感興趣的小伙伴們可以參考一下

2016-02-02

JavaScript 實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)彈窗DEMO附圖

做一個(gè)簡(jiǎn)單的設(shè)置網(wǎng)頁(yè)，因?yàn)樾枰貑⒃O(shè)備功能，于是就想在上面加一個(gè)倒計(jì)時(shí)彈窗的界面，下面是具體的實(shí)現(xiàn)，大家可以參考下

2014-03-03

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

詳解JavaScript的流程控制語(yǔ)句

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具