JS 基础部分练习题

文章目录

一、打印100以内的所有质数？

二、递归计算水仙花数

三.for循环写出1~100的和

四、for循环1~100之间偶数的和？

五、for循环1~100之间奇数的和？

六、while循环1~100之间奇数的和？

七、for循环实现国王的棋盘(64格小麦问题)？

八、闭包函数实现结算功能？

九、JS实现简单购物车功能？

十、JS实现简单的数据累加功能？

十一、循环实现打印1~100之间的所有质数？

十二、for循环实现九九乘法表？

十三、for循环实现1000以内的水仙花数？

十四、打印10个斐波那契数？

十五、JS实现简单（简单）简单的页面交互？

一、打印100以内的所有质数？

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for (var i = 2; i <= 100; i++) {

            //判断i是否为质数
            //获取2-i之间所有的数
            //创建一个变量来改变0或 1真或假

            var a = true;
            for (var j = 2;j<i; j++) {
                //判断i 是否能被j整除
                if( i % j == 0) {
                    //如果进入判断则证明i不是质数
                    a = false;
                }
            }
            if(a) {
                document.write(i+"<br/>");
            }
        }
    </script>
</body>
</html>

二、递归计算水仙花数

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>递归输出水仙花数</title>
    <script type="text/javascript">
        function daffodil(n,m){
            if(n==m){//当递归到n的值和传进来的m的值相等时，便结束递归
                return;
            }
            var a=n%10;//取出三位数的个位数
            var b=parseInt(n/10)%10;//取出三位数的十位数
            var c=parseInt(n/100);//取出三位数的百位数
            //如果这个三位数的每位数的3次方相加的和等于它本身，那这个数就是水仙花数，便输出
            if(Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3)==n){
                document.write(n+"<br>");
            }
            daffodil(n+1,m);//递归使n的值不断加1
            

        }
        daffodil(100,999)
    </script>
</head>
<body>
    
</body>
</html>

三.for循环写出1~100的和

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1到100的和
      var sum = 0;
      for (var a = 1; a <= 100; a++) {
        sum = sum + a;
      }
      console.log("1到100的和:", sum);
    </script>
  </body>
</html>

四、for循环1~100之间偶数的和？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //for循环
      var sum = 0; //记录总和的变化
      for (var c = 1; c <= 100; c++) {
        //判断是否偶数
        if (c % 2 == 0) {
          sum += c;
        }
      }
      console.log("1到100偶数的和:", sum);
    </script>
  </body>
</html>

五、for循环1~100之间奇数的和？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //for循环
      var sum = 0;
      for (var z = 1; z <= 100; z++) {
        if (z % 2 == 1) {
          sum += z;
        }
      }
      console.log("1到100之间奇数的和 ", sum);
    </script>
  </body>
</html>

六、while循环1~100之间奇数的和？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1到100奇数的和
      //while循环
      var sum = 0;
      var b = 1;
      while (b <= 100) {
        if (b % 2 == 1) {
          sum = sum + b;
        }
        b++;
      }
      console.log("1到100之间奇数的和:", sum);
    </script>
  </body>
</html>

七、for循环实现国王的棋盘(64格小麦问题)？

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        var sum = 0;
        for(var i = 1 ; i<= 64 ; i++){
            sum += Math.pow(2, i-1);
        }
        document.write('共' + sum*0.0006 + 'Kg')
    </script>
</body>
</html>

八、闭包函数实现结算功能？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function shooping(){
          var sum = 0
          function jiesuan(sp , money ){
          console.log(sp + ":" + money + "元") 
            sum += parseFloat(money)    
            return sum
          }
          return  jiesuan  
      }
      var  goods =shooping()
      goods("矿泉水",6)
      goods("牛奶",5)
      goods("饮料",5)
      var  altogether =goods("可乐",3.5)
      console.log("饮品总费用",altogether,"元")
    </script>
  </body>
</html>

九、JS实现简单购物车功能？

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><img src="./img/wallhaven-yj25z7(1).png" alt=""style="width:200px;height:200px";></li>
        <li>商品名称：风景画</li>
        <li>商品单价：<span id="price">5556.00</span></li>
        <li>购买数量：<input type="number" id="cnt" value="1"></li>
        <li>小计金额：<span id="result"></span></li>
    </ul>
 <script>
    //获取标签
    var _price = document.getElementById("price")
    var _cnt = document.getElementById("cnt")
    var _total = document.getElementById("result")

    //鼠标点击：onclick
    //输入框数据变化：onchange
    //键盘按下：onkeydown,键盘抬起：onkeyup
    _cnt.onchange = function() {
        //获取购买数量，转化成整数
        console.log("购买数量:",_cnt.value)
        var _count = parseInt(_cnt.value)

        //如果不做任何操作，用户可以输入负数（了解-可以通过选择结构完成判断）
        if(_count <= 0) {
            alert("购买数量不能小于1")
            _cnt.value = 1 //将数据修改成1
            // return 关键字，代表代码不再向后执行，到return直接结束
            return
        }
        //获取商品单价
        var _priceValue = parseInt(_price.innerText)
        //计算小计金额
        var subtotal = _count * _priceValue
        //输出小计金额
        _total.innerText = "￥" + subtotal + "元"
    }
 </script>
</body>
</html>

网页显示如下（只可计算累加）：

十、JS实现简单的数据累加功能？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="=box">
      <input type="text" id="num1" />
      <span>+</span>
      <input type="text" id="num2" />
      <button id="btn">计算</button>
      <div>计算结果：<span id="result"></span></div>
    </div>

    <script>
      //获取需要的标签
      var _num1 = document.getElementById("num1");
      var _num2 = document.getElementById("num2");
      var _btn = document.getElementById("btn");
      var _result = document.getElementById("result");

      //单击按钮  点击
      _btn.onclick = function () {
        //获取数据（获取表单元素的数据，使用.value获取）
        var num1Value = _num1.value;
        var num2Value = _num2.value;
        console.log(num1Value, num2Value, "需要计算的数据");

        //运算并输出结果
        //网页中用户输入的任何数据，都是字符串，并不是数值；
        //字符串加法运算时，会拼接；不会相加
        //var res = num1Value + num2Value
        //字符串数据，可以通过固定语法parseInt(),转换成数值
        var res = parseInt(num1Value) + parseInt(num2Value);
        _result.innerText = res;
      };
    </script>
  </body>
</html>

页面显示效果：

十一、循环实现打印1~100之间的所有质数？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      for (var i = 2; i <= 100; i++) {
        //判断i是否为质数
        //获取2-i之间所有的数
        //创建一个变量来改变0或 1真或假

        var a = true;
        for (var j = 2; j < i; j++) {
          //判断i 是否能被j整除
          if (i % j == 0) {
            //如果进入判断则证明i不是质数
            a = false;
          }
        }
        if (a) {
          document.write(i + "<br/>");
        }
      }
    </script>
  </body>
</html>

十二、for循环实现九九乘法表？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        width: 250px;
        height: 100px;
        /* border: 1px red solid; */
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <script>
      //for 循环
      for (var a = 1; a <= 9; a++) {
        document.write("<span></span> <br/>");
        for (var s = 1; s <= a; s++) {
          // document.write("<span></span>")
          document.write("<span>" + a + "x" + s + "=" + a * s + "</span>");
        }
        document.write("<br/>");
      }
    </script>
  </body>
</html>

十三、for循环实现1000以内的水仙花数？

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i= 100; i<=999; i++) {
            //拆分数字
            var b = parseInt(i/100)
            var s = parseInt(i % 100 / 10)
            var g = parseInt(i % 10)

            if(b*b*b+s*s*s+g*g*g === i) {
                console.log("水仙花数:",i)
            }
        }
    </script>
</body>
</html>

十四、打印10个斐波那契数？

代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 斐波那契数
      var num1 = (num2 = 1);
      var next = 0;
      console.log(num1, num2);

      for (var i = 1; i <= 10; i++) {
        next = num1 + num2;
        console.log(next);

        //交换数据

        num1 = num2; //num2数据存放到num1中
        num2 = next; //next 数据存放到num2中
      }
    </script>
  </body>
</html>

十五、JS实现简单（简单）简单的页面交互？

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">新的一天开始了</div>
    <button id="btu">按钮:设置div中的内容</button>
    <script>
      //获取页面标签
      var _box = document.getElementById("box");
      var _btu = document.getElementById("btu");
      //查看标签
      //console.log(_box)
      //console.log(_btn)

      //查看标签中的内容
      //concole.log(_box.innerHTML)
      //concole.log(_btn.innerHTML)

      //设置页面内容
      //固定语法：点击_btn对应的按钮，执行后面function（）{}花括号中的代码
      _btu.onclick = function () {
        //修改div中的内容
        _box.innerText = "新的一天结束了";
        //修改div的样式
        _box.style.width = "300px";
        _box.style.height = "200px";
        _box.style.backgroundColor = "orangered";
        _box.style.color = "white";
        _box.style.lineHeight = "200px";
        _box.style.textAlign = "center";
      };
    </script>
  </body>
</html>

总结：以上全是博主自己刚步入JS学习阶段的基础练习，看到的小伙伴都可以练习练习

多熟悉熟悉JS语法，博主会持续更新自己在JS学习阶段的内容，感兴趣的小伙伴可以点点关注哦！

JS 实现简单运算【JS入门基础题推荐】

文章目录

一、打印100以内的所有质数？

二、递归计算水仙花数

三.for循环写出1~100的和

四、for循环1~100之间偶数的和？

五、for循环1~100之间奇数的和？

六、while循环1~100之间奇数的和？

七、for循环实现国王的棋盘(64格小麦问题)？

八、闭包函数实现结算功能？

九、JS实现简单购物车功能？

十、JS实现简单的数据累加功能？

十一、循环实现打印1~100之间的所有质数？

十二、for循环实现九九乘法表？

十三、for循环实现1000以内的水仙花数？

十四、打印10个斐波那契数？

十五、JS实现简单（简单）简单的页面交互？

网站公告

今日签到

热门文章

最新发布

JS 实现简单运算 【JS入门基础题推荐】

文章目录

一、打印100以内的所有质数？

二、递归计算水仙花数

三.for循环写出1~100的和

四、for循环1~100之间偶数的和？

五、for循环1~100之间奇数的和？

六、while循环1~100之间奇数的和？

七、for循环实现国王的棋盘(64格小麦问题)？

八、闭包函数实现结算功能？

九、JS实现简单购物车功能？

十、JS实现简单的数据累加功能？

十一、循环实现打印1~100之间的所有质数？

十二、for循环实现九九乘法表？

十三、for循环实现1000以内的水仙花数？

十四、打印10个斐波那契数？

十五、JS实现简单（简单）简单的页面交互？

网站公告

今日签到

热门文章

最新发布

JS 实现简单运算【JS入门基础题推荐】