【前端灵魂脚本语言JavaScript③】——JS中的流程控制

简介: 顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。

JavaScript中的流程控制

在这里插入图片描述

@TOC

一、顺序结构

顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。

项目 Value
输入 0个或多个
输出 1个或多个
赋值 =

二、分支结构

1.if...else结构

定义月份,根据月份输出相应的季节。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var i = 10;
            if (i==12 || i==1 || i==2) {
                alert("冬季")
            } else if(i==3 || i== 4 || i==5){
                alert("春季")
            }else if(i==6 || i==7 || i==8){
                alert("夏季")
            }else if(i==9 || i==10 || i==11){
                alert("秋季")
            }else{
                alert("输入月份错误")
            }
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

2.switch语句

同样的用Switch语句来实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var i = 7;
            switch (i){
                case 3:
                case 4:
                case 5:
                alert("春季")
                    break;
                case 6:
                case 7:
                case 8:
                alert("夏季")
                    break;
                case 9:
                case 10:
                case 11:
                alert("秋季")
                    break;
                case 12:
                case 1:
                case 2:
                alert("冬季")
                    break
                default:
                alert("月份有误")
                    break
            }
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

三、循环结构

JavaScript的循环结构基本和java中的一致

1.while语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var i =1;
            while(i<10){
                alert(i);
                i++;
            }
        </script>
    </head>
    <body>
    </body>
</html>

求1-100的和

2.do...while语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var sum =0;
            var j = 1;
            do{
                sum += j;
                j++;
            }while (j<=100){
                alert(sum)
            }

        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

3.for语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var sum2 = 0;
            for(var k=0;k<=100;k++){
                sum2 += k;
            }
            alert(sum2)
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

四、流程控制练习

打印九九乘法表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            for(var i =1;i<=9;i++){
                for(var j=1;j<=i;j++){
                    document.write(j+"*"+i+"="+i*j+"&emsp;")
                }
                document.write("<br/>")
           }
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

相关文章
|
4月前
|
搜索推荐 Shell
bpmn-js打造最强flowable流程设计器
在企业系统中,流程引擎至关重要。Flowable虽强大,但默认设计器功能有限。本文基于 bpmn-js 打造增强版 Flowable 设计器,支持丰富自定义属性与后端联动。bpmn-js 优势明显:原生支持 BPMN 2.0、可扩展性强、社区活跃。节点涵盖多种事件、任务、网关等,满足复杂业务需求。示例效果可见在线预览。
|
5月前
|
JavaScript 前端开发 API
|
4月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
255 24
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
213 8
|
5月前
|
JavaScript 前端开发 容器
|
5月前
|
JavaScript 前端开发
|
5月前
|
存储 JavaScript 前端开发
|
5月前
|
移动开发 JavaScript 前端开发
|
5月前
|
存储 JavaScript 前端开发