JavaScript实现简单计算器功能

前端之家收集整理的这篇文章主要介绍了JavaScript实现简单计算器功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下

1.实现基本计算器功能,如图

JavaScript实现简单计算器功能


2.逻辑代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>计算器</title>
  6. <!--设置样式-->
  7. <style>
  8. .showdiv{
  9. text-align: center;
  10. margin:auto;/*设置居中*/
  11. border: solid 1px;
  12. width: 400px;
  13. height: 500px;
  14. border-radius: 10px;/*设置边框角度*/
  15. }
  16. input[type="text"]{
  17. margin-top: 10px;
  18. width: 380px;
  19. height: 40px;
  20. font-size: 40px;
  21. }
  22. input[type="button"]{
  23. margin: 10px;
  24. margin-top: 20px;
  25. width: 60px;
  26. height: 80px;
  27. font-size: 40px;
  28. font-weight: bold;
  29. }
  30. </style>
  31. <!--设置js代码-->
  32. <script type="text/javascript">
  33. /*将按钮的值赋值给输入框*/
  34. function num(btn){
  35. //把不能为零去掉
  36. if(document.getElementById("inp").value.match("除数")){
  37. document.getElementById("inp").value = "";
  38. }
  39. //获取button按钮的value
  40. var num = btn.value;
  41. console.log(num +" " +typeof(num))
  42. //将值赋值给text文本框
  43. switch(num){
  44. case "c":
  45. document.getElementById("inp").value = "";
  46. break;
  47. case "=":
  48. if(document.getElementById("inp").value.match("/")){
  49. if(document.getElementById("inp").value.split("/")[1] == "0"){
  50. document.getElementById("inp").value = "除数不能为零";
  51. }else{
  52. document.getElementById("inp").value = eval(document.getElementById("inp").value);
  53. }
  54. break;
  55. }else{
  56. document.getElementById("inp").value = eval(document.getElementById("inp").value);
  57. break;
  58. }
  59. default:
  60. document.getElementById("inp").value = document.getElementById("inp").value+num;
  61. break;
  62. }
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <div class = "showdiv">
  68. <input type="text" name="" id="inp" value="" readonly="readonly"/><br />
  69. <input type="button" name="" id="" value="0" onclick="num(this)"/>
  70. <input type="button" name="" id="" value="1" onclick="num(this)"/>
  71. <input type="button" name="" id="" value="2" onclick="num(this)"/>
  72. <input type="button" name="" id="" value="3" onclick="num(this)"/><br />
  73. <input type="button" name="" id="" value="4" onclick="num(this)"/>
  74. <input type="button" name="" id="" value="5" onclick="num(this)"/>
  75. <input type="button" name="" id="" value="6" onclick="num(this)"/>
  76. <input type="button" name="" id="" value="7" onclick="num(this)"/><br />
  77. <input type="button" name="" id="" value="8" onclick="num(this)"/>
  78. <input type="button" name="" id="" value="9" onclick="num(this)"/>
  79. <input type="button" name="" id="" value="+" onclick="num(this)"/>
  80. <input type="button" name="" id="" value="-" onclick="num(this)"/><br />
  81. <input type="button" name="" id="" value="*" onclick="num(this)"/>
  82. <input type="button" name="" id="" value="/" onclick="num(this)"/>
  83. <input type="button" name="" id="" value="=" onclick="num(this)"/>
  84. <input type="button" name="" id="" value="c" onclick="num(this)"/>
  85. </div>
  86. </body>
  87. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章