js利用點選事件做一個簡單的計算器
阿新 • • 發佈：2018-12-11
原始碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } span{ display: inline-block; width: 100px; height: 100px; background-color: wheat; border-radius: 100px; text-align: center; line-height: 100px; margin: 5px 10px; } div{ width: 500px; height: 700px; background-color: black; } #ling{ display: inline-block; width: 225px; height: 100px; background-color: wheat; border-radius: 100px; text-align: center; line-height: 100px; } #result{ display: inline-block; width: 480px; height: 100px; background-color: white; text-align: right; border-radius: 0; line-height: 100px; color: red; font: 25px/100px "微軟雅黑"; } </style> </head> <body> <div id=""> <span id="result"></span><br /> <span onclick="delAll()">del</span> <span onclick="del()">C</span> <span onclick="display('%')">%</span> <span onclick="display('/')">/</span> <span onclick="display(7)">7</span> <span onclick="display(8)">8</span> <span onclick="display(9)">9</span> <span onclick="display('*')">*</span> <span onclick="display(4)">4</span> <span onclick="display(5)">5</span> <span onclick="display(6)">6</span> <span onclick="display('-')">-</span> <span onclick="display(1)">1</span> <span onclick="display(2)">2</span> <span onclick="display(3)">3</span> <span onclick="display('+')">+</span> <span id="ling" onclick="display(0)">0</span> <span onclick="display('.')">.</span> <span onclick="cal()">=</span> </div> <script type="text/javascript"> var osp = document.getElementById("result"); function display(num){ osp.innerHTML=osp.innerHTML+num; } function cal(){ osp.innerHTML=eval(osp.innerHTML); } function delAll(){ osp.innerHTML=""; } function del(){ osp.innerHTML = osp.innerHTML.slice(0,osp.innerHTML.length-1); } </script> </body> </html>
————
簡單來說，就是根據需求給每一個按鍵新增一個點選事件。
先獲取到顯示器部分：
var osp = document.getElementById("result");
————
利用點選事件將按鍵的值傳給顯示部分，用到這個方法的的按鍵有0~9的數字，小數點，加減乘除和取餘（%）的運算子號
function display(num){
osp.innerHTML=osp.innerHTML+num;
}
————
給等號按鍵新增的方法如下，eval方法會自動進行運算。
function cal(){ osp.innerHTML=eval(osp.innerHTML); }
————
del按鍵用來清空顯示器中的內容。這裡直接給顯示器賦空值就好了
function delAll(){
osp.innerHTML="";
}
————
c鍵用來刪除輸入內容的最後一位此處用到的方法是slice（），slice（）方法中有兩個引數，就是拿這裡的例子來說：osp.innerHTML.slice(0,osp.innerHTML.length-1);就是擷取字串中索引值0到length-1的部分，包含0不包含length-1，所以剛好能達到我們所要的效果，即刪除字串的最後一位
function del(){ osp.innerHTML = osp.innerHTML.slice(0,osp.innerHTML.length-1); }
————
這是樣式圖：
