详解JavaScript的流程控制语句

JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看
一下这些语句。顺序结构我们在这里就不再提到,直接说条件和循环以及其他语句。
一、条件选择结构
       条件选择语句用于基于不同的条件来执行不同的动作,通常在写代码时,总是需要为不同的决定来执行不同的
动作,可以在代码中使用条件语句来完成该任务。
       在JavaScript中,我们可使用以下条件语句:
if 语句:只有当指定条件为true时,使用该语句来执行代码

<!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流程控制语句</title> </head> <body> <p>如果时间早于 20:00,会获得问候 "Good day"。</p> <button>点击这里</button> <p></p> <script type="text/javascript"> var time=new Date().getHours(); document.write("当前北京时间:"+time); function myFunction() { var x=""; if (time<20) { x="Good day"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>

运行的结果为:

详解JavaScript的流程控制语句

if...else语句:当条件为true时执行代码,当条件为 false 时执行其他代码

<!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流程控制语句</title> </head> <body> <p>如果时间早于 20:00,会获得问候 "Good day"。如果时间晚于 20:00,会获得问候 "Good evening"。</p> <button>点击这里</button> <p></p> <script type="text/javascript"> var time=new Date().getHours(); document.write("当前北京时间:"+time); function myFunction() { var x=""; if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>

运行的结果为:

详解JavaScript的流程控制语句

 if...else if....else 语句:使用该语句来选择多个代码块之一来执行

<!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流程控制语句</title> </head> <body> <p>如果时间早于 10:00,会获得问候 "Good morning"。</p> <p>如果时间早于 20:00,会获得问候 "Good day"。</p> <p>如果时间晚于 20:00,会获得问候 "Good evening"。</p> <button>点击这里</button> <p></p> <script type="text/javascript"> var time=new Date().getHours(); document.write("当前北京时间:"+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>

运行的结果为:

详解JavaScript的流程控制语句

switch语句: 使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

<!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流程控制语句2</title> </head> <body> <p>点击下面的按钮来显示今天是周几:</p> <button>点击这里</button> <p></p> <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表数字:"+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>

运行的结果:

详解JavaScript的流程控制语句

 default关键字的使用

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzgjz.html