ASCII码 ASCII码

利用JavaScript制作99乘法表和简易计算器

发布于：2022-05-21 13:25:53  栏目：技术文档

九九乘法表效果图

代码

  1.         //九九乘法表
  2.         document.write('<table border="1" width="800" align="center">')
  3.         for(var hang = 1; hang <= 9; hang++){
  4.             document.write('<tr>')
  5.             for (var td =1; td <= hang; td++){
  6.                 document.write('<td>' + td + 'X' + hang + '=' + ( td * hang ) + '</td>')
  7.             }
  8.             document.write('</tr>')
  9.         }

简易计算器效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>简单计算器</title>
  6.     <style>
  7.         div{
  8.             text-align: center;
  9.             font-size: 24px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>
  15.         <input type="text" size="5" id="num1" value="">
  16.         <select id="ysf">
  17.             <option value="+">+</option>
  18.             <option value="-">-</option>
  19.             <option value="*">*</option>
  20.             <option value="/">/</option>
  21.             <option value="%">%</option>
  22.         </select>
  23.         <input type="text" size="5" id="num2" value="">
  24.         <input type="button" value="计算" id="btn">
  25.     </div>
  26.     <div id="res"></div>
  28. <script>
  29.     //获取按钮注册事件
  30.     document.getElementById('btn').onclick=function(){
  31.         var num1 = document.getElementById('num1').value;
  32.         var num2 = document.getElementById('num2').value;
  33.         var ysf = document.getElementById('ysf').value;
  34.         var res = document.getElementById('res')
  35.     //计算
  36.         switch(ysf){
  37.             case '+':
  38.                 res.innerHTML = num1 + '+' + num2 + '=' + (num1*1 + num2*1);
  39.                 break;
  40.             case '-':
  41.                 res.innerHTML = num1 + '-' + num2 + '=' + (num1 - num2);
  42.                 break;
  43.             case '*':
  44.                 res.innerHTML = num1 + 'x' + num2 + '=' + (num1 * num2);
  45.                 break;
  46.             case '/':
  47.                 res.innerHTML = num1 + '÷' + num2 + '=' + (num1 / num2);
  48.                 break;
  49.             case '%':
  50.                 res.innerHTML = num1 + '%' + num2 + '=' + (num1 % num2);
  51.                 break;
  52.         }
  54.     };
  55. </script>
  56. </body>
  57. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行