Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js学习-实现简单计算器
Blogger Information
Blog 8
fans 0
comment 0
visits 5024
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
js学习-实现简单计算器
A正进
Original
450 people have browsed it

script的简单运用，实现简单计算器

  1. html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>简单计算器</title>
  7. <style type="text/css">
  8.     input{
  9.         width: 100px;
  10.         font-size: 20px;
  11.     }
  12.     select,span{
  13.         font-size: 20px;
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18.     <div>
  19.     <input type="text" name="" id="num1" value="" />
  20.     <select name="运算符号" id="yunsuanf">
  21.         <option value="+">+</option>
  22.         <option value="-">-</option>
  23.         <option value="*">*</option>
  24.         <option value="÷">/</option>
  25.     </select>
  26.     <input type="number"   id="num2" value=""/>
  27.     <span>=</span>
  28.     <input type="number"   id="dd3" value=""  placeholder="显示结果"  disabled="disabled" />
  29.     <button type="button" onclick="jisuan()">点击计算</button>
  31.     <br><br>
  32.     <!-- <div id="dd3">
  33.          计算的结果是:
  34.      </div> -->
  35. </div>
  36. <script >
  37.     function jisuan() {
  39.         var dd1=document.getElementById('num1').value
  40.         ddd1=parseFloat(dd1)
  42.         // parseFloat 是解析字符串并返回浮点数。指定字符串中的第一个字符是否为数字。如果是，它会解析字符串直到到达数字的末尾，并将数字作为数字而不是字符串返回。只返回字符串中的第一个数字！如果第一个字符不能转换为数字，parseFloat() 返回 NaN。使用isNaN(numValue)判断，如果值是 NaN， 那么 isNaN 函数返回 true ，否则返回 false
  43.         var dd2=document.getElementById('num2').value
  44.         ddd2=parseFloat(dd2)
  45.         var jieguo=document.getElementById('dd3')
  46.         var ysf= document.getElementById('yunsuanf').value
  47.         if (isNaN(ddd1)){
  48.             alert('请输入纯数字')
  49.         } else
  51.         if(ysf=='+'){
  52.            jieguo.value=ddd1+ddd2
  53.         }else if(ysf=='-'){
  54.             jieguo.value=ddd1-ddd2
  55.         }else if(ysf=='*'){
  56.             jieguo.value=ddd1*ddd2
  57.         }else {
  58.             jieguo.value=ddd1/ddd2
  59.         }
  61.     }
  63. </script>
  64. </body>
  65. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：放上效果图更加好
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