JavaScript经典案例之简易计算器

时间:2022-01-13 03:06:25

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

效果图:

JavaScript经典案例之简易计算器

逻辑:

1、首先通过遍历,为所有元素添加事件; 2、各个按钮功能分别实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. .one {
  11. width: 50px;
  12. height: 50px;
  13. background: #f60;
  14. display: inline-block;
  15. line-height: 50px;
  16. color: #fff;
  17. margin: 5px 5px 5px 0;
  18. font-size: 23px;
  19. text-align: center;
  20. cursor: pointer;
  21. }
  22.  
  23. .two {
  24. width: 112px;
  25. height: 50px;
  26. background: #f60;
  27. color: #fff;
  28. font-size: 23px;
  29. display: inline-block;
  30. margin-top: 5px;
  31. text-align: center;
  32. line-height: 50px;
  33. cursor: pointer;
  34.  
  35. }
  36.  
  37. .tools {
  38. background: blue;
  39. cursor: pointer;
  40.  
  41. }
  42.  
  43. .cal {
  44. height: 100px;
  45. position: relative;
  46. background: #999;
  47. width: 228px;
  48. color: #fff;
  49. font-size: 23px;
  50. cursor: pointer;
  51.  
  52. }
  53.  
  54. .cal_content {
  55. position: absolute;
  56. bottom: 10px;
  57. right: 10px;
  58. word-break: normal;
  59. cursor: pointer;
  60.  
  61. }
  62. </style>
  63.  
  64. <body>
  65. <div>
  66. <div class="cal">
  67. <span class="cal_content" id="cal_content">0</span>
  68. </div>
  69. <div>
  70. <span class="one tools calbtn">*</span>
  71. <span class="one tools calbtn">/</span>
  72. <span class="one tools" id="del">CE</span>
  73. <span class="one tools" id="resset">AC</span>
  74. </div>
  75. <div>
  76. <span class="one calbtn">7</span>
  77. <span class="one calbtn">8</span>
  78. <span class="one calbtn">9</span>
  79. <span class="one tools calbtn">+</span>
  80. </div>
  81. <div>
  82. <span class="one calbtn"> 4</span>
  83. <span class="one calbtn">5</span>
  84. <span class="one calbtn">6</span>
  85. <span class="one tools calbtn">-</span>
  86. <!-- <span clas>-</span> -->
  87. </div>
  88. <div>
  89. <span class="one calbtn">1</span>
  90. <span class="one calbtn">2</span>
  91. <span class="one calbtn">3</span>
  92. <span class="one tools calbtn">.</span>
  93. </div>
  94. <div>
  95. <span class="two calbtn">0</span>
  96. <span class="two tools " id="fin">=</span>
  97. </div>
  98. </div>
  99. </body>
  100. <script>
  101. // 获取标签
  102. var cal_content = document.getElementById('cal_content');
  103. var btn = document.getElementsByClassName('calbtn');
  104. var caltext = ''; //
  105. // 遍历,添加事件
  106. for (var i = 0; i < btn.length; i++) {
  107. btn[i].addEventListener('click', function () {
  108. // this指代 当前对象
  109. caltext += this.innerHTML;
  110. cal_content.innerHTML = caltext
  111. })
  112. }
  113.  
  114. // 清空
  115. var resset = document.getElementById('resset');
  116. resset.addEventListener('click', function () {
  117. cal_content.innerHTML = '0';
  118. caltext = ''; //
  119. })
  120.  
  121. // 删除键
  122. var del = document.getElementById('del');
  123. del.addEventListener('click', function () {
  124. caltext = caltext.substring(0, caltext.length - 1);
  125. cal_content.innerHTML = caltext
  126. if (cal_content.innerHTML.length == 0) {
  127. cal_content.innerHTML = '0';
  128. }
  129. })
  130.  
  131. //等号键
  132. var fin = document.getElementById('fin');
  133. fin.addEventListener('click', function () {
  134. // console.log(caltext)
  135. cal_content.innerHTML = eval(caltext);
  136. caltext = eval(caltext);
  137. // console.log(caltext)
  138. })
  139.  
  140. // 键盘事件
  141. document.onkeyup = function (event) {
  142. var event = event || window.event;
  143. console.log(event.key)
  144.  
  145. // 判断F5和CTRl键
  146. if(event.keyCode==116 || event.keyCode == 17){
  147. return;
  148. }
  149.  
  150. // 判断是否是 回车键
  151. if (event.keyCode == 13) {
  152. cal_content.innerHTML = eval(caltext);
  153. caltext = eval(caltext);
  154. return;
  155. }
  156.  
  157. caltext += event.key
  158. cal_content.innerHTML = caltext;
  159. }
  160. </script>
  161.  
  162. </html>

总计:

1、通过对象点击将元素的值链接在一起,最后通过**eval()函数**进行计算,将最终结果反馈到显示区域
2、设置一个全局表变量 *var caltext = ‘'; * 存放计算字符串
3、ondoucument.onkeyup = function(){ //代码 } 键盘事件

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

原文链接:https://blog.csdn.net/qq_44659826/article/details/108187213