欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用JS实现简单计算器的坑

程序员文章站 2022-03-13 13:58:58
...

HTML代码

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>计算器</title>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10.     <h1>JavaScript简易计算器</h1>
    11. 

  11.     <input type="text" name="valueone" id='valueone' class="valueone" placeholder="请输入第一个参数">
    12. 

  12.     <select  id="cal">
    13. 

  13.         <option  value="+">+</option>
    14. 

  14.         <option value="-">-</option>
    15. 

  15.         <option value="*">*</option>
    16. 

  16.         <option value="/">/</option>
    17. 

  17.         <option value="%"> % </option>
    18. 

  18.     </select>
    19. 

  19.     <input type="text" id="valuetwo" name="valuetwo" placeholder="请输入第二个参数">
    20. 

  20.     <input type="text" value="=" style="width: 20px;" disabled>
    21. 

  21.     <input type="text" value="" id="res" placeholder="此处显示结果">
    22. 

  22.     <br> <br>
    23. 

  23.     <button id="cal" onclick="cal()"> 计算</button>
    24. 

  24. </body>
    25. 

  25. </html>
    26.

JS代码:

    

  1.   function cal(){
    2. 

  2.         let valueone =Number( document.getElementById('valueone').value);
    3. 

  3.         let valuetwo =Number( document.getElementById('valuetwo').value);
    4. 

  4.         let cal =     document.getElementById('cal').value;
    5. 

    6. 

  6.         if(isNaN(valueone) || isNaN(valuetwo)){
    7. 

  7.             alert('请输入有效的数字');
    8. 

  8.         }
    9. 

  9.         if(valueone == null || valuetwo == null){
    10. 

  10.             alert('输入的数字不能为空')
    11. 

  11.         }
    12. 

  12.         if(cal == '/' || cal == '%' ){
    13. 

  13.             if(valuetwo == 0){
    14. 

  14.                 alert('除数不能为零')
    15. 

  15.             }
    16. 

  16.         }
    17. 

  17.         let result = 0;
    18. 

  18.         switch(cal){
    19. 

  19.             case '+' :
    20. 

  20.                result = (valueone + valuetwo);
    21. 

  21.                break; 
    22. 

  22.             case '-':
    23. 

  23.                 result = valueone - valuetwo;
    24. 

  24.                 break; 
    25. 

  25.             case '*':
    26. 

  26.             result = valueone * valuetwo;
    27. 

  27.             break; 
    28. 

  28.             case '/':
    29. 

  29.             result = valueone / valuetwo;
    30. 

  30.             break;
    31. 

  31.                 case '%':
    32. 

  32.             result = valueone % valuetwo;
    33. 

  33.             break; 
    34. 

  34.         }
    35. 

  35.  document.getElementById('res').innerText.value = result ;
    36. 

  36.     }
    37.

经验总结:
1.js中进行数学运算要强制转换数据类型,因为+号也有字符串链接的作用,若不转为数字,会当作字符串进行操作
2.输出到文本框的innerText 用法需要在熟悉下.不知道什么原因,输入不到文本框中.

可以的话麻烦老师看下什么原因导致的

上一篇： Springboot docker jenkins 自动化部署并上传镜像

下一篇： 保存用户设置练习

推荐阅读