whlie循环和for循环的应用

（1）通过标签获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过标签获取元素</title>
    <script type="text/javascript">
        window.onload = function(){
            // //获取页面上所有的li
            // var aLi = document.getElementsByTagName('li');
            //获取id为list01的ul
            var oList = document.getElementById('list01');
            //再获取这个ul下的所有li
            var aLi = oList.getElementsByTagName('li');
            alert(aLi.length);//8
            // aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法
            aLi[0].style.backgroundColor = 'gold';
            aLi[1].style.backgroundColor = 'gold';
        }
    </script>
</head>
<body>
    <ul id="list01">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul id="list02">
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>
</html>

(2)循环语句

  循环语句：
        通过循环语句可以反复的执行一段代码多次
    
    while循环
        - 语法：
            while(条件表达式){
                语句...
            }
    
        - while语句在执行时，
            先对条件表达式进行求值判断，
                如果值为true，则执行循环体，
                    循环体执行完毕以后，继续对表达式进行判断
                    如果为true，则继续执行循环体，以此类推
                如果值为false，则终止循环
    
    do...while循环
        - 语法：
            do{
                语句...
            }while(条件表达式)
    
        - 执行流程：
            do...while语句在执行时，会先执行循环体，
                循环体执行完毕以后，在对while后的条件表达式进行判断，
                如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
                如果结果为false，则终止循环
    
            实际上这两个语句功能类似，不同的是while是先判断后执行，
                而do...while会先执行后判断，
            do...while可以保证循环体至少执行一次，
                而while不能
    for语句，也是一个循环语句，也称为for循环
        在for循环中，为我们提供了专门的位置用来放三个表达式：
            1.初始化表达式
            2.条件表达式
            3.更新表达式
    
    for循环的语法：
            for(①初始化表达式;②条件表达式;④更新表达式){
                ③语句...
            }
    
            for循环的执行流程：
                ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
                ②执行条件表达式，判断是否执行循环。
                    如果为true，则执行循环③
                    如果为false，终止循环
                ④执行更新表达式，更新表达式执行完毕继续重复②
    任意一种循环都可以互相嵌套
        创建一个循环，往往需要三个步骤
        1.创初始化一个变量
        var j = 0;
        2.在循环中设置一个条件表达式
        while(j < aLi.length){
            aLi[j].style.background = 'gold';
            3.定义一个更新表达式，每次更新初始化变量
            j++;
        }
        
        以下是死循环的写法
        像这种将条件表达式写死为true的循环，叫做死循环
        该循环不会停止，除非浏览器关闭，死循环在开发中慎用
        可以使用break，来终止循环
        
        while(true){
            if(j>10){
                break;//退出整个循环
            }
            j++;
        }
        for循环的死循环写法
        for(;;){
        }
        
        break关键字可以用来退出switch或循环语句
            不能在if语句中使用break和continue
            break关键字，会立即终止离他最近的那个循环语句
        continue关键字可以用来跳过当次循环
            同样continue也是默认只会对离他最近的循环循环起作用
        可以为循环语句创建一个label，来标识当前的循环
            label:循环语句
        使用break语句时，可以在break后跟着一个label，
            这样break将会结束指定的循环，而不是最近的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <script type="text/javascript">
        window.onload = function(){
            var oList = document.getElementById('list01');
            var aLi = oList.getElementsByTagName('li');
            /*for (var i = 0; i < aLi.length; i++) {
                if(i % 2 == 0){
                    aLi[i].style.background = 'gold';
                }
            }*/
            /*for(var j in aLi){
                aLi[j].style.background = 'red';
            }*/
            //创建一个循环，往往需要三个步骤
            //1.创初始化一个变量
            var j = 0;
            //2.在循环中设置一个条件表达式
            while(j < aLi.length){
                aLi[j].style.background = 'gold';
                //3.定义一个更新表达式，每次更新初始化变量
                j++;
            }
            
            /*while(true){
                if(j>10){
                    break;//退出整个循环
                }
                j++;
            }
            //for循环的死循环写法
            for(;;){
            }*/
            outer:
            for(var i=0 ; i<5 ; i++){
                console.log("@外层循环"+i);
                for(var j=0 ; j<5; j++){
                    console.log("内层循环:"+j);
                    break outer;
                }
            }
        } 
    </script>
</head>
<body>
    <ul id="list01">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

[whlie循环]
(3)年投资率

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var money = 1000;
        var count = 0;
        while(money < 5000){
            money *=1.05;
            count++;    
        }
        console.log("一共需要"+count+"年")
    </script>
</head>
<body>
    
</body>
</html>

(4)小明考试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        while(true){
            var score = prompt("请输入小明的期末成绩(0-100):");
            if(score >= 0 && score <= 100){
                break;
            }
            alert("请输入有效分数");
        }
        if (score > 100 || score < 0 || isNaN(score)){
            alert("输错了");
        }else{
            if (score == 100){
                alert("宝马车");
            }else if (score >= 80){
                alert("手机一部");
            }else if (score >= 60){
                alert("一本参考书");
            }else{
                alert("挨打");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

[for循环]
(5)奇数之和

<!DOCTYPE html>
<html lang="en">
<head>
    <
</html>meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var sum = 0;
        for (var i = 1 , sum=0 ; i<=100 ; i++) {
            if(i%2 != 0){
                sum = sum+i;
            }
        }
        console.log("奇书之和为:"+sum);
    </script>
</head>
<body>
</body>

(6)7的倍数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var sum = 0;
        var count = 0;
        for(var i=1 ; i<=100 ; i++){
            if(i % 7 == 0){
                sum += i;
                count++;
            }
        }
        console.log("总和为:"+sum);
        console.log("总数量为:"+count);
    </script>
</head>
<body>
    
</body>
</html>

(7)水仙花数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        for(var i=100 ; i<1000 ; i++){
            var bai = parseInt(i/100);
            var shi = parseInt((i-bai*100)/10);
            var ge = i % 10;
            if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
                console.log(i);
            }

        }

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

(8）判断质数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
         var num = prompt("请输入一个大于1的整数:");
         if(num <= 1){
            alert("不合法");
         }else{
            var flag = true;
            for(var i=2 ; i<num ; i++){
                if(num % i == 0){
                    flag = false;
                }
            }
            if(flag){
                alert(num + "是质数");
            }else{
                alert("这个不是质数")
            }
         }
    </script>
</head>
<body>
    
</body>
</html>

(9)九九乘法口诀表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        for(var i=1 ; i<=9 ; i++ ){
            for(var j=1 ; j<=i ; j++){
                document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
            }
            document.write("<br />");
        }
    </script>
    <style type="text/css">
        body{
            width: 2000px;
        }
        span{
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
    
</body>
</html>
a.png

(10)一到一百的质数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        for(var i=2 ; i<=100 ; i++){
            var flag = true;
            for(var j=2 ; j<i ; j++){
                if(i%j == 0){
                    flag = false;
                }
            }
            if(flag){
                console.log(i); 
            }
        }
    </script>
</head>
<body>
    
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容