Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单的计算器制作
Blogger Information
Blog 14
fans 0
comment 0
visits 8003
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单的计算器制作
「flasky」
Original
590 people have browsed it

简单的计算器制作 ,输入数字验证,暂时只能做到用数据转换,如果输入的是数字后加字母还是无法排除,
如: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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post