ASCII码 ASCII码

Js基础知识：Js实现制作简单的计算器和九九乘法表实例

发布于：2022-05-19 11:59:48  栏目：技术文档

1、制作一个如图所示的简易计算器的样子，如下

js简易计算器的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div>
  10.         <input type="text" size="5" id="num1" value="" />
  11.         <select id="ysf">
  12.             <option value="+">+</option>
  13.             <option value="-">-</option>
  14.             <option value="*">*</option>
  15.             <option value="/">/</option>
  16.             <option value="%">%</option>
  17.         </select>
  18.         <input type="text" size="5" id="num2" value=""/>
  19.         <input type="button" value="计算" id="btn" />
  20.     </div>
  21.     <p id="res"></p>
  23.     <script>
  24.         document.getElementById('btn').onclick=function(){
  25.             var num1 = document.getElementById('num1').value;
  26.             var num2 = document.getElementById('num2').value;
  27.             var ysf = document.getElementById('ysf').value;
  29.             document.getElementById('res').innerHTML=num1+"---"+num2+"---"+ysf;
  30.             var res = document.getElementById('res')
  31.             // res.innerHTML = num1+'x'+num2+'='+(num1 * num2)
  32.             switch(ysf){
  33.                     case '+':
  34.                         res.innerHTML = num1+'+'+num2+'='+(parseInt(num1) + parseInt(num2));
  35.                         break;
  36.                     case '-':
  37.                         res.innerHTML = num1+'-'+num2+'='+(parseInt(num1) - parseInt(num2));
  38.                         break;
  39.                     case '*':
  40.                         res.innerHTML = num1+'*'+num2+'='+(parseInt(num1) * parseInt(num2));
  41.                         break;
  42.                     case '/':
  43.                         res.innerHTML = num1+'/'+num2+'='+(parseInt(num1) / parseInt(num2));
  44.                         break;
  45.                     case '%':
  46.                         res.innerHTML = num1+'%'+num2+'='+(parseInt(num1) % parseInt(num2));
  47.                         break;
  48.                 }
  49.         }
  50.     </script>
  51. </body>
  52. </html>

2、制作一个如图所示的九九乘法表（二种方法：正和反）

js代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         //九九乘法表：第一种方法
  11.         document.write('<table border="1" width="800" align="center">')
  12.         for (var i = 1; i <= 9; i++) {
  13.             document.write('<tr>')
  14.             for (var td = 1; td <= i; td++) {
  15.                 document.write('<td>'+ td + '×' + i + '=' + (td * i) + '</td>')
  16.             }
  17.             document.write('</tr>')
  18.         }
  19.         document.write('</table>')
  21.         document.write('<br/>')
  23.         //九九乘法表：第二种方法（相反）
  24.         document.write('<table border="1" width="800" align="center">')
  25.         for (var i = 9; i > 0; i--) {
  26.             document.write('<tr>')
  27.             for (var td = 1; td <= i; td++) {
  28.                 document.write('<td>'+ td + '×' + i + '=' + (td * i) + '</td>')
  29.             }
  30.             document.write('</tr>')
  31.         }
  32.         document.write('</table>')
  33.     </script>
  34. </body>
  35. </html>

学习一段时间了,感觉js基础的熟练度不够，有的忘了。。。看来需要多练多写多记的js，记录和积累~

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行