编程地带JavaScript 进阶营

javascript学习(三)-流程与循环

2018-12-22  本文已影响0人  MA木易YA

大家知道代码一般是逐条加载执行的,但是在实际开发中,我们需要在特定区域按照我们的需求来执行代码,这个时候就产生了流程控制和循环

条件语句——if & switch

实例

  1. if

如果时间小于 10:00,则生成问候 "Good morning",如果时间大于 10:00 小于 20:00,则生成问候 "Good day",否则生成问候 "Good evening":

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}


#结果
今天好
  1. switch

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

#输出
今天是星期四
var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;

#输出
期待周末

循环

js里的循环和大多程序语言一样,for 、 while 、 do...while,用法也是类似的,简单用案例展示用法吧:

  1. while循环
#提示用户输入一个正整数n, 计算1 + 2 + 3 + ...n的和
//    1.定义变量保存上一次的和
          var sum = 0;
          //    2.定义变量保存递增的数
          var number = 1;
          while (number <= 5) {
              console.log("sum = "+ sum +" + number = "+ number);
              sum = sum + number;
              number++;
          }
          console.log("sum = " + sum);
  1. for循环
#for循环嵌套实现:打印99乘法表
<html>
<style>
        
                span{
                    display: inline-block;
                    border: 1px solid #000;
                    padding: 10px;
                }
        </style>
        <script>
            /*
              1.观察发现有很多行很多列--》循环嵌套
              2.尖尖朝上,让内循环条件表达式随着外循环i改变
              3.输出的结果等于 内循环的变量 * 外循环的变量
            */
            for (var i = 1; i <= 9; i++) {
                for (var j = 1; j <= i; j++) {
                    document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
                }
                window.document.write("<br/>");
            }
        </script>
</html>

image.png
  1. do...while:
do {
       语句1;
       语句2;
       ....
   } while ( 条件 );


    执行流程

    首先会执行一次循环体中的语句
    接着判断while中的条件表达式是否为真,如果为真再次执行循环体中的语句
    重复上述过程,直到条件不成立就结束while循环


注意:

上一篇 下一篇

猜你喜欢

热点阅读