9.6-day03-js基础

79 阅读2分钟

1. 商品列表打折

.box {
        height: 300px;
        width: 300px;
        border: 1px solid #000;
        margin: 50px;
        overflow: hidden;
      }

      /* attribute  属性 -->简写 attr */
      .box::after {
        content: attr(data-aaa);
        display: block;
        height: 40px;
        width: 100%;
        background-color: green;
        transform: rotate(-45deg) translateX(-30%) translateY(-150%);
        text-align: center;
        color: white;
        line-height: 40px;
        font-size: 30px;

      }
    <div class="box" data-aaa="打5折"></div>
    <div class="box" data-aaa="打4折"></div>
    <div class="box" data-aaa="打7折"></div>
    <div class="box" data-aaa="打8折"></div>
    <div class="box" data-aaa="打9折"></div>

效果: image.png 2. while循环

// while (true) {
      //   console.log("111");
      // }

      // while循环是先判断后执行
      //计算1+2+3+……+100之和

      // var num = 1;//增长
      // var sum = 0;//统计结果
      // while (num <= 100) {
      //   // console.log(num); // 1
      //   sum = sum + num;
      //   num++
      // }
      // console.log(sum);


      //循环被 break中断

      var num = 1;
      while (num <= 100) {
        console.log(num);
        if (num == 10) {
          break;
        }
        num++;
      }

while练习

//#region 
      /* 打印100以内 7的倍数
        打印100以内的奇数
        打印100以内所有偶数的和
        打印图形
      * * * * * * * * * *
      * * * * * * * * * *
      * * * * * * * * * *
      * * * * * * * * * * 
      
      */
      //#endregion

      //打印100以内 7的倍数
      var num = 1;
      while (num <= 100) {
        if (num % 7 == 0) {
          console.log(num);
        }
        num++;
      }

      //打印100以内的奇数
      console.log("---------------");
      var num = 1;
      while (num <= 100) {
        if (num % 2) {
          console.log(num);
        }
        num++;
      }
      //打印100以内所有偶数的和
      console.log("---------------");
      var num = 1;
      var sum = 0;
      while (num <= 100) {
        if (num % 2 == 0) {
          sum += num;
        }
        num++;
      }
      console.log(sum); //2550
      console.log("---------------");
      var num = 1;
      while (num <= 40) {
        document.write(" * ");
        if (num % 10 == 0) {
          document.write("<br>")
        }
        num++;
      }
      document.write("<br>")
      //方式2

      var row = 0;
      while (row < 4) {
        var num = 1;
        while (num <= 10) {
          document.write(" * ");
          num++;
        }
        document.write("<br>")
        row++;
      }

3. do while循环

// 1~100和相加
      var num = 1;
      var sum = 0;
      do {
        // console.log(num);
        sum += num;
        // sum = sum + num;
        num++;
      } while (num <= 100);

      console.log(sum); //5050
// var num = 1;
      // do {
      //   if (num % 7 == 0) {
      //     console.log(num);
      //   }
      //   num++;
      // } while (num <= 100);


      // var num = 1;
      // do {
      //   if (num % 2 == 1) {
      //     console.log(num);
      //   }
      //   num++;
      // } while (num <= 100);


      // var num = 1;
      // var sum = 0;
      // do {
      //   if (num % 2 == 0) {
      //     sum += num;
      //   }
      //   num++;
      // } while (num <= 100);
      // console.log(sum);

      // var num = 1;
      // do {
      //   document.write(" * ");
      //   if (num % 10 == 0) {
      //     document.write("<br>");
      //   }
      //   num++;
      // } while (num <= 40);

      // document.write("<br>");
      // //   1---> 15   // 4

      console.log("---------");
      // var row = 1;
      // do {
      //   var num = 1; //如同每次游戏从1级开始
      //   do {
      //     document.write(" * ")
      //     num++;
      //   } while (num <= 10);
      //   document.write("<br>")
      //   row++;
      // } while (row <= 4)


      //while是先判断,后执行
      //do..while,先执行,后判断



      console.log("------------------------");
      //1, 一个新入职,月工资为2000元的员工,每年涨当年工资5%,
      //20年后的月工资是多少?
      var salary = 2000;
      var num = 1;
      while (num <= 20) {
        salary = salary * (1 + 0.05);
        num++
      }
      console.log(salary.toFixed(1));
      console.log("------------------------");
      // 2, 山上有一口缸可以装50升水,现在有15升水。
      //老和尚叫小和尚下山挑水,每次可以挑5升。
      // 问:小和尚要挑几次水才可以把水缸挑满?通过编程解决这个问题。
      var num = 15;
      var count = 0;
      do {
        console.log(num);
        num += 5;
        count++;
      } while (num < 50);
      console.log(count);

      console.log("------------------------");
      // 3, 打印100–200之间所有能被3或者7整除的数
      var num = 100;
      while (num <= 200) {
        if (num % 3 == 0 || num % 7 == 0) {
          console.log(num);
        }
        num++;
      }

      console.log("------------------------");
      // 4, 计算10的阶乘   (1*2*3*4*5*6*7*8*9*10   n的阶乘1*2……*n)

      var n = 10;
      var sum = 1;
      while (n != 0) {
        // console.log(n);
        sum *= n;
        n--;
      }
      console.log(sum); //3628800


      console.log("----------------");
      // 5, 计算1+3+5+...+99的和
      // 0  为false ,
      // 99,98 97 95.... 1,0
      var n = 99;
      var sum = 0;
      while (n) {
        if (n % 2 == 1) {
          sum += n;
        }
        n--;
      }
      console.log(sum); //2500

      // 6, 99乘法表
      console.log("----------------");
      // 1-9
      var n = 1;
      while (n <= 9) {
        var m = 1;
        while (m <= n) {
          document.write(m + "x" + n + '=' + m * n + " ");
          m++;
        }
        document.write("<br>");
        n++;
      }


      //计算1+3+5+...+99的和

      var n = 1;
      var sum = 0;
      while (true) {
        //1 2 3 4.. 98,99
        if (n % 2 == 1) {
          sum += n;
        }
        n++;
        if (n == 100) {
          break; //终止循环
        }
      }
      console.log(sum);

4. for循环

//  for(表达式1;表达式2;表达式3){

      //  }

      // for (; ;) {
      //   console.log(1111);
      // }


      // 1~10的和
      // var sum = 0;
      // for (var i = 1; i <= 100; i++) {
      //   sum += i;
      // }
      // console.log(sum); //5050



      for (var i = 0, j = 0; i < 5, i < 10; i++, j++) {
        //           9 * 9
        console.log(i * j); //最后一次的乘积是多少?
      }
      // 16, 36,0,8
// for (var i = 0; i < 5; i++) {
      //   for (var j = 0; j <= i; j++) {
      //     document.write(" ★ ")  //搜狗输入法 v1 + -
      //   }
      //   document.write("<br>")
      // }

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

      //2.
      for (var i = 0; i <= 100; i++) {
        if (i % 2 == 1) {
          console.log(i);
        }
      }
      console.log("----------------------");
      //3.
      var sum = 0;
      for (var i = 0; i <= 100; i++) {
        if (i % 2 == 0) {
          sum += i;
        }
      }
      console.log(sum);
      console.log("----------------------");
      //4.
      for (var i = 1; i <= 40; i++) {
        document.write(" * ");
        if (i % 10 == 0) {
          document.write("<br>")
        }
      }

5. break和continue

// break 和 continue 的区别?
      //break 中断,终止
      //    1.它可以用在分支(switch)和循环中
      //    2.结束整个循环
      //    3.默认是结束就近的循环,还可以结束 指定的循环
      //continue 继续
      //    1.它只能用在循环中
      //    2.结束当次循环

      //相同点:break和continue关键字后面的代码都不会被执行!

      // 1, 判断一个数是不是合数。(指自然数中除了能被1和本身整除外,还能被其他的数整除(不包括0)的数。)
      // 2, 判断一个数是不是素数。(除了1和它本身以外不再有其他的除数整除。)

      // 9,  1和9, 3,  27  合数
      //  7   11 13 17  19 23  素数

      var num = 30;  //3,5,6,10
      var isSu = true;//假设它是素数 
      // 2-6
      for (var i = 2; i < num; i++) {
        if (num % i == 0) {
          isSu = false;//把素改成合数
          console.log("被整除");
          break;
        }
      }
      // console.log(isSu);
      var res = isSu ? "素数" : "合数"
      console.log(num + "是" + res);
// 求整数1~100的累加值,但要求跳过所有个位为3的数。
      // var sum = 0;
      // for (var i = 1; i <= 100; i++) {
      //   if (i % 10 == 3) {
      //     continue;
      //     break;
      //   }
      //   sum += i;
      // }
      // console.log(sum); // 4570
      // tree

      //扩展
      a: for (var i = 0; i < 5; i++) {
        console.log(" i:" + i);
        b: for (var j = 0; j < 5; j++) {
          console.log("  j:" + j);
          c: for (var k = 0; k < 5; k++) {
            console.log("   k:" + k);
            break a;
          }
        }
      }

9.5练习

//#region  switch的练习
            //1.接受用户输入的'分数'
           var score = prompt("请输入分数?");
           //2.判断输入分数,是否合法
           if (score >= 0 && score <= 100) {
             // 90
             switch (true) {
               case score >= 80 && score <= 100:
                 console.log("A");
                 break;
               case score >= 70 && score < 80:
                 console.log("B");
                 break;
               case score >= 60 && score < 70:
                 console.log("C");
                 break;
               case score >= 0 && score < 60:
                 console.log("D");
                 break;
               default:
                 console.log("别捣蛋");
             }
           } 
      //#endregion


      // 2.  判断一个整数,属于哪个范围:大于0;小于0;等于0
      var num = 1;
      if (num == 0) {
        console.log("等于0");
      } else if (num > 0) {
        console.log("大于0");
      } else {
        console.log("小于0");
      }

      var num = 1;
      if (num != 0) {
        if (num > 0) {
          console.log("大于0");
        } else {
          console.log("小于0");
        }
      } else {
        console.log("等于0");
      }


      var num = 1;
      var res = num == 0 ? "等于0" : (num > 0 ? "大于0" : "小于0");



      // 3.  判断一个整数是偶数还是奇数,并输出判断结果

      var num = parseInt(Math.random() * 100);
      var res = num % 2 == 0 ? "偶数" : "奇数"
      console.log(res);

      if (num % 2 == 0) {
        console.log("偶数");
      } else {
        console.log("奇数");
      }



      // 4.  开发一款软件,根据公式(身高-108)*2=标准体重,
      //可以有10斤左右的浮动。来观察测试者体重是否合适

      var h = prompt("请输入身高?");
      var w = prompt("请输入体重?");
      var s = (h - 108) * 2; //算出标准值
      var min = s - 10;
      var max = s + 10;
      if (w >= min && w <= max) {
        console.log("您身体健康!");
      } else {
        console.log("请与你80岁的女友分手吧");
      }
      // // 5.  已知圆的半径r,求出圆的面积s      (S = π×r2)
      // // 随意输入一个年份,判断这个年份是否为闰年.

      var r = 100;//半径

      var res = Math.PI * r * r;
      var res = Math.PI * r ** 2;
      var res = Math.pow(r, 2) * Math.PI




      // // 7.  输入赵本山的考试成绩,显示所获奖励
      // //        成绩==100分,爸爸给他买辆车
      // //         成绩>=90分,妈妈给他买MP4
      // //         90分>成绩>=60分,妈妈给他买本参考书
      // //         成绩<60分,什么都不买

      var score = prompt("请输入分数?");
      if (score == 100) {
        console.log("爸爸给他买辆车");
      } else if (score >= 90 && score < 100) {
        console.log("妈妈给他买MP4");
      } else if (score >= 60 && score < 90) {
        console.log("妈妈给他买本参考书");
      } else {
        console.log("男女混合双打!");
      }


      // // 8.  会员购物时,根据积分的不同享受不同的折扣,
      // // 计算会员购物时所获得折扣
      var x = prompt("请输入积分?");
      if (x >= 0 && x < 2000) {
        console.log("打9折");
      } else if (x >= 2000 && x < 4000) {
        console.log("8折");
      } else if (x >= 4000 && x < 8000) {
        console.log("打7折");
      } else {
        console.log("打6折");
      }


      var w = prompt("请输入体重?");
      var h = prompt("请输入身高?");

      var bmi = w / (h ** 2);
      console.log(bmi);

      if (bmi < 18.5) {
        console.log("过轻");
      } else if (bmi >= 18.5 && bmi < 25) {
        console.log("正常");
      } else if (bmi >= 25 && bmi <= 28) {
        console.log("过重");
      } else if (bmi > 28 && bmi <= 32) {
        console.log("肥胖");
      } else {
        console.log("非常肥胖!");
      }