JavaScript經典案例之簡易計算器
阿新 • • 發佈:2020-08-25
本文例項為大家分享了JavaScript實現簡易計算器的具體程式碼,供大家參考,具體內容如下
效果圖:
邏輯:
1、首先通過遍歷,為所有元素新增事件; 2、各個按鈕功能分別實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <style> .one { width: 50px; height: 50px; background: #f60; display: inline-block; line-height: 50px; color: #fff; margin: 5px 5px 5px 0; font-size: 23px; text-align: center; cursor: pointer; } .two { width: 112px; height: 50px; background: #f60; color: #fff; font-size: 23px; display: inline-block; margin-top: 5px; text-align: center; line-height: 50px; cursor: pointer; } .tools { background: blue; cursor: pointer; } .cal { height: 100px; position: relative; background: #999; width: 228px; color: #fff; font-size: 23px; cursor: pointer; } .cal_content { position: absolute; bottom: 10px; right: 10px; word-break: normal; cursor: pointer; } </style> <body> <div> <div class="cal"> <span class="cal_content" id="cal_content">0</span> </div> <div> <span class="one tools calbtn">*</span> <span class="one tools calbtn">/</span> <span class="one tools" id="del">CE</span> <span class="one tools" id="resset">AC</span> </div> <div> <span class="one calbtn">7</span> <span class="one calbtn">8</span> <span class="one calbtn">9</span> <span class="one tools calbtn">+</span> </div> <div> <span class="one calbtn"> 4</span> <span class="one calbtn">5</span> <span class="one calbtn">6</span> <span class="one tools calbtn">-</span> <!-- <span clas>-</span> --> </div> <div> <span class="one calbtn">1</span> <span class="one calbtn">2</span> <span class="one calbtn">3</span> <span class="one tools calbtn">.</span> </div> <div> <span class="two calbtn">0</span> <span class="two tools " id="fin">=</span> </div> </div> </body> <script> // 獲取標籤 var cal_content = document.getElementById('cal_content'); var btn = document.getElementsByClassName('calbtn'); var caltext = ''; // // 遍歷,新增事件 for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click',function () { // this指代 當前物件 caltext += this.innerHTML; cal_content.innerHTML = caltext }) } // 清空 var resset = document.getElementById('resset'); resset.addEventListener('click',function () { cal_content.innerHTML = '0'; caltext = ''; // }) // 刪除鍵 var del = document.getElementById('del'); del.addEventListener('click',function () { caltext = caltext.substring(0,caltext.length - 1); cal_content.innerHTML = caltext if (cal_content.innerHTML.length == 0) { cal_content.innerHTML = '0'; } }) //等號鍵 var fin = document.getElementById('fin'); fin.addEventListener('click',function () { // console.log(caltext) cal_content.innerHTML = eval(caltext); caltext = eval(caltext); // console.log(caltext) }) // 鍵盤事件 document.onkeyup = function (event) { var event = event || window.event; console.log(event.key) // 判斷F5和CTRl鍵 if(event.keyCode==116 || event.keyCode == 17){ return; } // 判斷是否是 回車鍵 if (event.keyCode == 13) { cal_content.innerHTML = eval(caltext); caltext = eval(caltext); return; } caltext += event.key cal_content.innerHTML = caltext; } </script> </html>
總計:
1、通過物件點選將元素的值連結在一起,最後通過**eval()函式**進行計算,將最終結果反饋到顯示區域
2、設定一個全域性表變數 *var caltext = ‘'; * 存放計算字串
3、ondoucument.onkeyup = function(){ //程式碼 } 鍵盤事件
更多計算器功能實現,請點選專題: 計算器功能彙總 進行學習
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。