javascript基本的循环方法，总结。

最新推荐文章于 2023-12-31 19:07:13 发布

酱爆老鸡排

最新推荐文章于 2023-12-31 19:07:13 发布

阅读量271

点赞数 2

文章标签： js web css javascript

本文链接：https://blog.csdn.net/qq_45411727/article/details/115406060

版权

循环分类：
for
while
do-while
for-in

1.while循环

while格式
1初始循环变量
while (2判断循环条件) {
3执行代码
4更新循环变量
}

<style>
        span{
            display: inline-block;
            width: 70px;
        }
    </style> 
</head>
<body>
    <script>
        window.onload=function(){
 var body=document.body;
        var i=1;
        while(i<=9&&i>0){
            var j=1;
            while(j<=i&&j>0){
                body.innerHTML+='<span>'+i+'*'+j+'='+i*j+'</span>';
                j++;
            }
            i++;
            body.innerHTML+='</br>';
                
        }
    }
    </script>

运行结果如下：
用span定义了格式

2.for-in循环

for-in
作用：循环对象

 for(key in 对象){
    key：为属性名
      对象[key]：为属性值
    }

 <script>
        var obj={
            name:'王大娘',
            age:'20',
            sex:'女',
            add:'武汉'
        }
        for(var shuxing in obj){//在对象里定义一个属性名字
            console.log(shuxing, '-----', obj[shuxing]);//属性名---属性
        }
    </script>

运行结果如下：
在这里插入图片描述

3.switch循环

分支语句：
if和switch的区别：
如果分支比较少(3个及3个以内)，用if，如果超过3个，用switch

    switch (常量) {
        case 变量1:
            常量和变量1全等，就执行这里;
             break;
       case 变量2:
            常量和变量2全等，就执行这里;
           break;
       ...
      default:
           常量和变量都不相等，执行这里;
     }

   <script>
         var n = new Date().getDay();//获取日期
         switch(n){
             case 1:
                 console.log('今天是星期1');
                 break;
                 case 2:
                 console.log('今天是星期2');
                 break;
                 case 3:
                 console.log('今天是星期3');
                 break;
                 case 4:
                 console.log('今天是星期4');
                 break;
                 case 5:
                 console.log('今天是星期5');
                 break;
                 case 6:
                 console.log('今天是星期6');
                 break;
                 default:
                     console.log('今天是星期天');
                
         }
    </script>

需要更改电脑的日期显示，运行结果如下：
在这里插入图片描述

4.do while循环

/do-while的特点：至少可以执行一次
1初始循环变量
do {
2执行代码
3更新循环变量
} while (4判断循环条件)

 <script>
        var i=10;
        do{
            i++;
            console.log(i);
        }while(i<10)
    </script>

5.循环数组和字符串

<script>
        var a=['派大星','海绵宝宝','章鱼哥'];
        console.log(a.length);    //打印了数组的长度以后才能显示后面的a.lenth，不然报错
        for(i=0;i<=a.length;i++){
            console.log(a[i]);
        }
        var b='asjdlasdsadsddss';
        console.log(b.length);
        for(j=0;j<=b.length;j++){
            console.log(b[j]);
        }
    </script>

运行如下：

在这里插入图片描述

6.成绩查询功能

    在web输入一个数字判断成绩是否合格，凭id在script中使用
    body中的元素，再用按钮触发成绩判断是否合格。

<script>
window.onload=function(){
    var fen=document.getElementById('fen');
    var btn=document.getElementById('btn');

btn.onclick = function () {
                var grade= fen.value;//取得成绩，默认是数字

    if(grade>100||grade<0){    //排除了非正常分数的干扰
        alert('同学，你是我们班的吗');
    }
    else{
        alert('可以查询你的成绩咯');
    }
    if(grade>=0&&grade<60){
        alert('你的成绩不合格！！');
    }
    else if(grade>=60&&grade<70){
        alert('你的成绩一般！');
    }
    else if(grade>=70&&grade<80){
        alert('你的成绩为良！');
    }
    else if(grade>=80&&grade<90){
        alert('你的成绩为优秀！');
    }
    else{
        alert('你真是个天才！');
    
}
}
}



</script>
<body>
<input type="text" id="fen">
<input type="button" id="btn" value="查询">
</body>

运行如下：
在这里插入图片描述

酱爆老鸡排

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
javascript基本的循环方法，总结。

循环分类：forwhiledo-whilefor-in1.while循环while格式1初始循环变量while (2判断循环条件) {3执行代码4更新循环变量}<style> span{ display: inline-block; width: 70px; } </style> </head><body> <script>
复制链接

扫一扫