详解JavaScript的流程控制语句


Posted in Javascript onNovember 30, 2015

 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 onclick="myFunction()">点击这里</button> 
 
<p id="demo"></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 onclick="myFunction()">点击这里</button> 
 
<p id="demo"></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 onclick="myFunction()">点击这里</button> 
 
<p id="demo"></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 onclick="myFunction()">点击这里</button> 
 
<p id="demo"></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关键字的使用

<!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 onclick="myFunction()">点击这里</button> 
 
<p id="demo"></p> 
 
<script type="text/javascript"> 
var d=new Date().getDay(); 
document.write("今天的星期代表数字:"+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>

      运行的结果为:

详解JavaScript的流程控制语句

二、循环结构
      循环可以将代码块执行指定的次数。
      JavaScript支持不同类型的循环:
(1)for语句:循环代码块一定的次数

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

      运行的结果为:

详解JavaScript的流程控制语句

(2)for...in语句: 循环遍历对象的属性

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

运行的结果为:

详解JavaScript的流程控制语句

(3)while语句:当指定的条件为 true 时循环指定的代码块。先判断,再执行语句,这种比较实用。

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

      运行的结果为:

详解JavaScript的流程控制语句

 (4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次,再判断

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

      运行的结果为:

详解JavaScript的流程控制语句

三、其他语句
(1)break语句:用于跳出循环。

for(var box=1;box<=10;box++) 
 { 
 if(box==5) 
 { 
 break;//强制退出整个循环 
 } 
 document.write("box="+box+"<br/>"); 
 }

运行的结果为:

详解JavaScript的流程控制语句

      执行到第四次循环时不再继续执行,跳出了真个循环,,输出的少了box=5以后的循环。
(2)continue语句:用于跳过循环中的一个迭代。

for(var box=1;box<=10;box++) 
{ 
 if(box==5) 
 { 
 continue;//退出当前循环,还会继续执行后面的循环 
 } 
 document.write("box="+box+"<br/>"); 
}

运行的结果为:

详解JavaScript的流程控制语句

执行到第四次循环时,跳出第五次循环,继续向下面执行,输出的少了box=5。
(3)with语句:将代码的作用域设置到一个特定的对象中
      先来看一般我们是怎么样输出对象的属性的值的:

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);

      运行的结果为:

详解JavaScript的流程控制语句

      改用with语句来写:

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);

运行的结果为:

详解JavaScript的流程控制语句

从三大方面介绍了JavaScript的流程控制语句,希望大家仔细阅读,数量掌握JavaScript流程控制语句的使用方法。

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
javascript拖拽应用实例
Mar 25 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
javascript RegExp 使用说明
May 21 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
You might like
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python实现TCP文件传输
2020/03/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
秘书英文求职信范文
2014/01/31 职场文书
大三学习计划书范文
2014/05/02 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书