PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > 简单的计算器制作

简单的计算器制作

「flasky」
「flasky」 原创
2021年11月19日 16:01:15 567浏览

简单的计算器制作 ,输入数字验证,暂时只能做到用数据转换,如果输入的是数字后加字母还是无法排除,
如:parseInt(123asd) = 123

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .div1 {
  8.             width: 250px;
  9.             height: 400px;
  10.             background: #dbdbdb;
  11.             border: 1px solid slategray;
  12.             box-shadow: 0px 1px 3px 0px;
  13.             border-radius: 5px 5px;
  14.             margin: 30px 100px;
  15.         }
  16.         .d2 {
  17.             text-align: center;
  19.         }
  20.          .mt-4 {
  21.              margin-top: 10px;
  22.              padding: 10px;
  23.          }
  24.     </style>
  25. </head>
  26. <body>
  31.     <section class="div1 mt-4">
  32.         <div class="d2 mt-4"><span>计算器</span></div>
  34.         <input type="text" size="2" id="num1">
  36.         <select name="select" id="select">
  37.             <option value="+">+</option>
  38.             <option value="-">-</option>
  39.             <option value="*">*</option>
  40.             <option value="/">/</option>
  41.             <option value="%">%</option>
  42.         </select>
  43.         <input type="text" size="2" id="num2">
  44.         <span>=</span>
  45.         <span id="res"></span><br>
  46.             <br>
  47.         &nbsp;&nbsp;    <input type="button" value="计算" id="btn">  &nbsp;&nbsp;<button id="reBtn">重置</button>
  49.         <br>
  50.         <br>
  51.         <span id="outNum1"></span>
  52.         <br>
  53.         <span id="outNum2"></span>
  54.     </section>
  58. </body>
  59. <script>
  60.     document.getElementById('btn').onclick=function(){
  61.         document.getElementById('outNum1').innerHTML="";
  62.         document.getElementById('outNum2').innerHTML="";
  63.         document.getElementById('res').innerHTML="";
  64.         var num1 = parseInt(document.getElementById('num1').value);
  65.         var num2 = parseInt(document.getElementById('num2').value);
  66.         var maVa =document.getElementById('select').value;
  70.         if (isNaN(num1)) {
  71.             document.getElementById('outNum1').innerHTML ='第一个数据非数字,请重新输入!';
  72.             return;
  73.         }
  75.         if (isNaN(num2)) {
  76.             document.getElementById('outNum2').innerHTML ='第二个数据非数字,请重新输入!';
  77.             return;
  78.         }
  79.         switch (maVa){
  80.         case '+':
  81.         document.getElementById('res').innerHTML=num1+num2;
  82.         break
  84.         case '-':
  85.             document.getElementById('res').innerHTML =num1-num2;
  86.             break;
  87.         case '*':
  88.             document.getElementById('res').innerHTML = num1 * num2;
  89.             break
  90.         case '/':
  91.             if (num2==0){
  92.                 document.getElementById('outNum2').innerHTML ='第二个数据不能为0,请重新输入!';
  93.                 return;
  94.             }
  95.             document.getElementById('res').innerHTML = num1 / num2;
  96.             break;
  97.         case '%':
  98.             if (num2==0){
  99.                 document.getElementById('outNum2').innerHTML ='第二个数据不能为0,请重新输入!';
  100.                 return;
  101.             }
  102.             document.getElementById('res').innerHTML =num1%num2;
  103.             break;
  104.         }
  105.     };
  107.     document.getElementById('reBtn').onclick = function (){
  108.         document.getElementById('outNum1').innerHTML="";
  109.         document.getElementById('outNum2').innerHTML="";
  110.         document.getElementById('res').innerHTML="";
  111.         document.getElementById('num1').value="";
  112.         document.getElementById('num2').value="";
  113.     }
  115. </script>
  116. </html>
上一条： vue 打包后，放到tp5框架中总是报错Uncaught TypeError: Cannot redefine property: $router 下一条： 简单计算器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程