JavaScrpt制作九九乘法表，1到100数字的连续加法，计算机；

川长思鸟来 2022-05-17 12:56 60阅读 0赞

QQ:275487025  
QQ群：854312770  
欢迎各种大牛指点，和小白一起学习。

九九乘法表：

for(var a=1;a<10;a++){
        for(i=1;i<=a;i++){
        document.write(i+"x"+a+"="+i*a+" ");
      }
        document.write("<br>");
    }

记得在br标签外加“ ”号！！还有声明变量的条件后面每隔一个加；号！！！  
九九乘法表嘛，是不是就是有1到9个数字，我们先做出来1到9个数字来吧，  
声明一个变量，var a=1；做出让他循环9个数字，a<10；然后写出循环顺序；  
这是不是已经出现了1到9的数字拉！  
然后我们是不是需要做出来第二个数字呢，继续声明一个变量，i=1；跟上面的一样，让他出来九个数字，但是是不是要跟第一个数字有不一样的，比他大或者比他小，而且随着他的变化变化，就是没次循环就变一次，因为有1x1所有第一次要和他一样开始，i<=a；给他设置一下怎么循环，i++；  
最后我们是不是要让之前的数字输入到页面上，document.write（HTML页面书写的意思，语法！！别输入错哦！），关键地方到了，我们是不是要让他输出oxo=o，给他一个格式吧，(i+”x”+a+”=”+i\*a+” ”)；用变量i+乘号（用x键）“x”+变量a+等于号“=”+i变量*乘a变量+空格&\#160；在我们js语言中*是乘号的意思，为了好看要每个算数都有一些间隔就输入了代表空格的&\#160；  
最后我们调出以上的结果让他们依次的换行，`document.write("<br>");`

这样我们的九九乘法表就做好了！

1到100的数字相加：

var a=0;
    for(var i=1;i<=100;i++){ a+=i }alert(a)

先声明一个变量出来，i=1；让他循环100次，i<=100；怎么循环i++；我们需要两个数相加，所以需要第二个数字，再声明一个变量a=0；然后找出结果，a+=i就是a=a+i，意思是i每循环一次就加一次a，每次i循环就是自身增加1，当他自身等于100的时候就要自动停止循环，因为上面我们给i设置了限制循环i<=100，a+=i也可以当做一个变量，最后我们输出结果，alert（a）；弹出输出，当i等于100的时候就是最后循环的时候再加a，此时的a就是我们要的结果。

计算机制作：

<input type="text" id="num1" value="">
    <select name="" id="num2">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">x</option>
        <option value="/">÷</option>
    </select>
    <input type="text" id="num3"  value="">
    <span>=</span>
    <input type="text" id="num4"  value="">
    <button onclick="calculate()">计算</button>
     function calculate(){
           //js 进行html 操作
           // num1为 第一个input里的 值
           var num1 = document.getElementById('num1').value;
           // num2 为 + - * /
           var num2 = document.getElementById('num2').value;
    
           var num3 = document.getElementById('num3').value;
           // 为输出结果
           var num4 = document.getElementById('num4');
           var count = '';
           switch (num2){
                //加
               // 加号在js里有拼接字符串的作用 所以说 进行运算的时候需要把传过来的
               // 数据进行 字符串转换 成数字型才能进行运算
               case '1':
                   count = parseInt(num1)+parseInt(num3);
                   break;
               // 减法
               case '2':
                   count = num1-num3;
                   break;
               //乘法
               case '3':
                   count = num1*num3;
                   break;
                //除法
               case '4':
                   count = num1/num3;
                   break;
           }
           num4.value=count;
    
       }

结果如图：  
![这里写图片描述][70]  
看图我们是不是发现我们最先需要的是4个input框和一个按键，所以先先做出来，并且给他们命名1，2，3，4（举例而已，哈哈，现实中一定要命名有意义！！），最后我们发现第二个是不是要有个选择，就用下拉框吧！select，好了现在图片上的东西我们都做出来了，现在是不是要来实现他们的功能，计算！要给他赋予功能我们就要先拿到他吧，`function calculate(){}` 这样我们就可以拿到他们了，注意了，最后一个空我们是把值赋给他，而不是要拿过来，所以不一样，  
前面的是这样的：`document.getElementById('xxxx').value;`  
后面的是：`var num4 = document.getElementById('xxxxx');`  
value就是我们拿的，然后我们是不是要给他进行加减乘除的运算，一共我们有四种运算方式，就写四种，

case 'xxxx':
                   count = xxxxx  -（加减乘除）   xxxxx;
                   break;

注意的是 加法！！！！  
因为我们知道加“ ”的是字符串类的，字符串特点是拼凑不是相加，+号在js里不止只是相加，还有一个就是拼凑的用法，“2”+“3”=23，所以我们要把他强行转换成数字类的，用我们的语法：`parseInt(xxxx)`！！！重点！！！！不要忘记！！！！

[70]: /images/20220517/cfe6cebc97f7418bac1af43a0f02a703.png