js实现计算器
一、使用javascript實現簡易版計算器
本來是一個風和日麗的下午，像往常一樣摸著魚。恍惚間，我想起了自己在校園時沒有能夠做出來的js計算器效果。心血來潮，覺得可以再度嘗試搞一手（順著思路隨便寫的，所以還有一些地方可以進行代碼重構和優化）
效果如下
代碼如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 300px;height: 400px;}.container div {display: flex;}.input {width: 100%;}.input>input {width: 99%;margin: 0.1%;height: 50px;}button {height: 60px;flex: 1;}</style> </head> <body><div class="container"><div class="input"><input type="text"></div><div><button>del</button><button>C</button></div><div><button>7</button><button>8</button><button>9</button><button>+</button></div><div><button>4</button><button>5</button><button>6</button><button>-</button></div><div><button>1</button><button>2</button><button>3</button><button>*</button></div><div><button>0</button><button>.</button><button>=</button><button>/</button></div></div><script>let btns = document.getElementsByTagName('button');let input = document.querySelector("input");let len = btns.length;let a,b,result,type;for(let i = 0;i < len;i++) {btns[i].addEventListener('click',()=> {let val = btns[i].innerHTML;let value = input.value;if(val >= 0 && val <= 9 || val === "." && value.indexOf(".") === -1) {input.value += val;}if(value === "" && val === ".") {input.value = "";}if(value !== "") {switch(val) {case "del":let str = value.substring(0,value.length - 1);input.value = str;break;case "C":input.value = "";break;case "+":a = value;input.value = "";type = "+";break;case "-":a = value;input.value = "";type = "-";break;case "*":a = value;input.value = "";type = "*";break;case "/":a = value;input.value = "";type = "/";break;case "=":if(a !== undefined) {b = value;if(type === "+") {result = parseFloat(a) + parseFloat(b);}if(type === "-") {result = parseFloat(a) - parseFloat(b);}if(type === "*") {result = parseFloat(a) * parseFloat(b);}if(type === "/") {result = parseFloat(a) / parseFloat(b);}let newStr = result + "";let arr = newStr.split(".");input.value = arr.length === 2 ?result.toFixed(2) : result;}break;}}})}</script> </body> </html>如果有好的建議或意見可以一起交流，謝謝大家
總結
- 上一篇： JavaScript实现简易计算器
- 下一篇： html+css+js实现简易计算器