js---循环语句基础练习题

最新推荐文章于 2022-08-05 22:00:54 发布

零度碳酸-

最新推荐文章于 2022-08-05 22:00:54 发布

阅读量2.4k

点赞数 3

分类专栏： JS基础练习题

本文链接：https://blog.csdn.net/weixin_41086056/article/details/87904305

版权

JS基础练习题专栏收录该内容

19 篇文章 2 订阅

订阅专栏

1、马蜂窝首页轮播图，点击右侧小图切换大图
马蜂窝轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    div{
          height: 640px;
          width:100%;
         transition: all 2s;
         position: absolute;

      }

     #btn{
          width:130px;
          height:510px;
          z-index: 4;
          position: fixed;
         top:56px;
        left:1850px;
      }
      #div0
      {
          background:url("images/1.jpg.jpeg") no-repeat center;
          /*opacity: 0;*/
      }
      #div1
      {
          background:url("images/2.jpg.jpeg")no-repeat center;
          opacity: 0;
      }
      #div2
      {
          background:url("images/3.jpg.jpeg")no-repeat center;
          opacity: 0;
      }
      #div3
      {
          background:url("images/4.jpg.jpeg")no-repeat center;
          opacity: 0;
      }
      #div4
      {
          background:url("images/5.jpg.jpeg")no-repeat center;
          opacity: 0;
      }
  </style>
</head>
<body>

<div id="btn">
                  <button id="bn0"><img src="images/1-1.jpg.jpeg" alt=""> </button>
                  <button id="bn1"> <img src="images/2-2.jpg.jpeg" alt=""></button>
                  <button id="bn2"> <img src="images/3-3.jpg.jpeg" alt=""></button>
                  <button id="bn3"> <img src="images/4-4.jpg.jpeg" alt=""></button>
                  <button id="bn4"> <img src="images/5-5.jpg.jpeg" alt=""></button>
</div>

          <div id="div0"></div>
          <div id="div1"></div>
          <div id="div2"></div>
          <div id="div3"></div>
          <div id="div4"></div>


  <script>
      var bn0=document.getElementById("bn0");
      var bn1=document.getElementById("bn1");
      var bn2=document.getElementById("bn2");
      var bn3=document.getElementById("bn3");
      var bn4=document.getElementById("bn4");

      var div0=document.getElementById("div0");
      var div1=document.getElementById("div1");
      var div2=document.getElementById("div2");
      var div3=document.getElementById("div3");
      var div4=document.getElementById("div4");
      var pre;
      bn0.onclick=function () {
          setPage(bn0);
      };
      bn1.onclick=function () {
          setPage(bn1);
      };
      bn2.onclick=function () {
          setPage(bn2);
      };
      bn3.onclick=function () {
          setPage(bn3);
      };
      bn4.onclick=function () {
          setPage(bn4);
      };
      function setPage(bn) {
          if (pre) {
              pre.style.opacity = 0;
          }
          switch (bn) {
              case bn0:
                  div0.style.opacity = 1;
                  pre = div0;
                  break;
              case bn1:
                  div1.style.opacity = 1;
                  pre = div1;
                  break;
              case bn2:
                  div2.style.opacity = 1;
                  pre = div2;
                  break;
              case bn3:
                  div3.style.opacity = 1;
                  pre = div3;
                  break;
              case bn4:
                  div4.style.opacity = 1;
                  pre = div4;
                  break;
          }
      }
      </script>
</body>

2、使用双重循环写乘法口诀表

<script>
for (var i = 1; i < 10; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "*" + i + "=" +(j * i)+"&nbsp;&nbsp;");
        }
        document.write("<br>");
    }

</script>

3、使用循环完成水仙花数100-999 370=333+777+000；

<script>
for(var i1=100;i1<=999;i1++){
                     var a, b,c;
                      a=parseInt(i1/100);
                      b=parseInt(i1%100/10);
                      c=i1%10;

                      if(a*a*a+b*b*b+c*c*c==i1) {
                          console.log(i1)
                      }
                      }

</script>

4、使用双重循环完成表格制作, document.body.innerHTML="

"
(通过弹窗输入的两次数值,定为行数和列数)

 <style>
        table
        {
            border-collapse: collapse;
        }
        td
        {
            border:1px solid #000000;
            width: 100px;
            height: 30px;
        }
    </style>
</head>
<body>
<script>
    var row=Number(prompt("请输入行数"));
    var col=Number(prompt("请输入列数"));
    if(!isNaN(row) && !isNaN(col)){
        var str="<table>";
        for(var j=0;j<row;j++){
            str+="<tr>";
            for(var i=0;i<col;i++){
                str+="<td></td>";
            }
            str+="</tr>";
        }
        str+="</table>";
    }
    document.write(str);
</script>

5．入职薪水10K，每年涨幅5%，50年后工资多少？

<script>
     var i=0;
     var sum=10000;
     while (i<=50){
         sum+=0.05*sum;
         i++;

     }
     console.log(sum);
</script>

6、打印100以内 7的倍数

<script>

        for(var i=7;i<=100;i++){
            if(0==i%7 ){
             console.log(i);
        }
        }

</script>

7、打印100以内的奇数

<script>
    for(var i=0;i<=100;i++){
        if(i%2!==0){
            console.log(i);
        }
    }
</script>

8、求出1-1/2+1/3-1/4……1/100的和

<script>
    var sum=0;
    var i=1;
    for (i = 1; i < 101; ++i) {
        if (i % 2 === 0) {
            sum -= 1 / i;
        }
        else
            {
                sum += 1 / i;
            }

        }
    console.log(sum);

</script>

9、打印出1000-2000年中所有的闰年，并以每行四个数的形式输出

<script>
    var a=0;
    for(i=1000;i<=2000;i++) {
        if ((i % 400 === 0) || ((i % 4 === 0) && (i % 100) !== 0)) {
          document.write(i+" ")
            a++;
          if(a%4===0){
              document.write("<br>");
          }


        }
    }
</script>