基于JavaScript的簡易計算器功能
本文實例為大家分享了JavaScript實現(xiàn)簡易計算器功能的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
源代碼:
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title></title> ?? ??? ?<style type="text/css"> ?? ??? ??? ?* { ?? ??? ??? ??? ?margin: 0; ?? ??? ??? ??? ?padding: 0; ?? ??? ??? ?} ?? ??? ??? ?.dome { ?? ??? ??? ??? ?width: 400px; ?? ??? ??? ??? ?height: 430px; ?? ??? ??? ??? ?margin: 50px auto; ?? ??? ??? ??? ?background: #CCC; ?? ??? ??? ??? ?padding: 20px; ?? ??? ??? ?} ?? ??? ??? ?.dome>input { ?? ??? ??? ??? ?width: 100%; ?? ??? ??? ??? ?height: 50px; ?? ??? ??? ??? ?font-size: 24px; ?? ??? ??? ??? ?margin-bottom: 30px; ?? ??? ??? ?} ?? ??? ??? ?.dome>button { ?? ??? ??? ??? ?width: 90px; ?? ??? ??? ??? ?height: 60px; ?? ??? ??? ??? ?background-color: white; ?? ??? ??? ??? ?border: none; ?? ??? ??? ??? ?margin: 5px; ?? ??? ??? ??? ?float: left; ?? ??? ??? ??? ?font-size: 18px; ?? ??? ??? ?} ?? ??? ??? ?button:hover { ?? ??? ??? ??? ?cursor: pointer; ?? ??? ??? ?} ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ?<div class="dome"> ?? ??? ??? ?<!-- disabled="disabled" 禁用輸入框 --> ?? ??? ??? ?<input type="" name="" id="ipt" value="0" /> ?? ??? ??? ?<button class="num">7</button> ?? ??? ??? ?<button class="num">8</button> ?? ??? ??? ?<button class="num">9</button> ?? ??? ??? ?<button id="del">←</button> ?? ??? ??? ?<button class="num">4</button> ?? ??? ??? ?<button class="num">5</button> ?? ??? ??? ?<button class="num">6</button> ?? ??? ??? ?<button class="ysf">+</button> ?? ??? ??? ?<button class="num">1</button> ?? ??? ??? ?<button class="num">2</button> ?? ??? ??? ?<button class="num">3</button> ?? ??? ??? ?<button class="ysf">-</button> ?? ??? ??? ?<button>%</button> ?? ??? ??? ?<button class="num">0</button> ?? ??? ??? ?<button class="num">.</button> ?? ??? ??? ?<button class="ysf">*</button> ?? ??? ??? ?<button id="clear">AC</button> ?? ??? ??? ?<button class="ysf">/</button> ?? ??? ??? ?<button id="result" style="width: 190px; background-color: #333; color: white;">=</button> ?? ??? ?</div> ?? ?</body> </html> <script type="text/javascript"> ?? ?//1.把數(shù)字和小數(shù)點歸為一類。class="num" ?? ?//2.把加減乘除運算符歸為一類。 ?? ?//3.顯示框,退格鍵,歸零鍵,等號 單獨設(shè)置id。 ?? ?//4.把顯示框,歸零鍵,等號,退格 標(biāo)簽對象獲取出來。 ?? ?//5.點擊數(shù)字,在顯示框上顯示 ?? ?//6.要做運算,條件得兩個數(shù)和一個運算符 ?? ?//7.定義三個變量用來接收第一個數(shù),第二個數(shù)和運算符。 ?? ?//8.四則運算 ?? ?var numValue1 = ''; ?? ?var numValue2 = ''; ?? ?var czf = ''; ?? ?var ipt = document.getElementById("ipt"); ?? ?var del = document.getElementById("del"); ?? ?var clear = document.getElementById("clear"); ?? ?var result = document.getElementById("result"); ?? ?var numArr = document.getElementsByClassName("num"); ?? ?for (var i = 0; i < numArr.length; i++) { ?? ??? ?//給每個數(shù)字綁定單擊事件 ?? ??? ?numArr[i].onclick = function() { ?? ??? ??? ?//判斷用戶是否在輸入小數(shù)點 ?? ??? ??? ?if(this.innerText=="."){ ?? ??? ??? ??? ?//alert("點小數(shù)點了"); ?? ??? ??? ??? ?if(numValue1.indexOf(".")==-1&&numValue1.length>=1){ ?? ??? ??? ??? ??? ?// var num = this.innerText; ?? ??? ??? ??? ??? ?// alert(num); ?? ??? ??? ??? ??? ?numValue1 += this.innerText; ?? ??? ??? ??? ??? ?//乘1會去掉首尾無效的0 ?? ??? ??? ??? ??? ?ipt.value = numValue1*1; ?? ??? ??? ??? ?} ?? ??? ??? ?}else{ ?? ??? ??? ??? ?// var num = this.innerText; ?? ??? ??? ??? ?// alert(num); ?? ??? ??? ??? ?numValue1 += this.innerText*1; ?? ??? ??? ??? ?//乘1會去掉首尾無效的0 ?? ??? ??? ??? ?ipt.value = numValue1; ?? ??? ??? ?} ?? ??? ?} ?? ?} ?? ?//給運算符綁定單擊事件 ?? ?var ysfArr = document.getElementsByClassName("ysf"); ?? ?for (var i = 0; i < ysfArr.length; i++) { ?? ??? ?//給每個數(shù)字綁定單擊事件 ?? ??? ?ysfArr[i].onclick = function() { ?? ??? ??? ?//當(dāng)用戶點擊了運算符,把第一個數(shù)字給第二個數(shù)字,然后把第一個數(shù)字清空,用來接收用戶輸入的第二個數(shù)字 ?? ??? ??? ?//alert(this.innerText); ?? ??? ??? ?if (numValue2 == '') { ?? ??? ??? ??? ?numValue2 = numValue1; ?? ??? ??? ??? ?numValue1 = ''; ?? ??? ??? ??? ?czf = this.innerText; ?? ??? ??? ??? ?//alert("普通運算"); ?? ??? ??? ?} else { ?? ??? ??? ??? ?//有可能會進(jìn)行四則運算 ?? ??? ??? ??? ?//alert("有可能會進(jìn)行四則運算"); ?? ??? ??? ??? ?if(numValue1!=''){ ?? ??? ??? ??? ??? ?resultFun(); ?? ??? ??? ??? ?} ?? ??? ??? ?} ?? ??? ??? ?//保存操作符 ?? ??? ??? ?czf = this.innerText; ?? ??? ?} ?? ?} ?? ?//給等號綁定單擊事件,進(jìn)行運算 ?? ?result.onclick = function() { ?? ??? ?resultFun(); ?? ?} ?? ?//運算結(jié)果 ?? ?function resultFun() { ?? ??? ?var one = Number(numValue2); ?? ??? ?var two = Number(numValue1); ?? ??? ?var r = null; ?? ??? ?switch (czf) { ?? ??? ??? ?case '+': ?? ??? ??? ??? ?r = one + two; ?? ??? ??? ??? ?break; ?? ??? ??? ?case '-': ?? ??? ??? ??? ?r = one - two; ?? ??? ??? ??? ?break; ?? ??? ??? ?case '*': ?? ??? ??? ??? ?r = one * two; ?? ??? ??? ??? ?break; ?? ??? ??? ?case '/': ?? ??? ??? ??? ?if (two == 0) { ?? ??? ??? ??? ??? ?alert("除數(shù)不能為0"); ?? ??? ??? ??? ??? ?numValue1 = ''; ?? ??? ??? ??? ??? ?numValue2 = ''; ?? ??? ??? ??? ??? ?czf = ''; ?? ??? ??? ??? ??? ?r = 0; ?? ??? ??? ??? ?} else { ?? ??? ??? ??? ??? ?r = one / two; ?? ??? ??? ??? ?} ?? ??? ??? ??? ?break; ?? ??? ?} ?? ??? ?//四則運算時,把上一次運算的結(jié)果給numValue2,然后把numValue1 清空 ?? ??? ? ?? ??? ?numValue2 = new Number(r).toFixed(4)*1; ?? ??? ?numValue1=''; ?? ??? ?ipt.value = numValue2; ?? ?} ?? ?//歸零鍵 ?? ?clear.onclick = function() { ?? ??? ?numValue1 = ''; ?? ??? ?numValue2 = ''; ?? ??? ?czf = ''; ?? ??? ?ipt.value = '0'; ?? ?} ?? ?//退格鍵 ?? ?del.onclick = function() { ?? ??? ?if (numValue1.length >= 1) { ?? ??? ??? ?numValue1 = numValue1.substring(0, numValue1.length - 1); ?? ??? ??? ?ipt.value = numValue1; ?? ??? ?}else if(numValue2.length >= 1){ ?? ??? ??? ?numValue2 = numValue2.substring(0, numValue2.length - 1); ?? ??? ??? ?ipt.value = numValue2; ?? ??? ?}else { ?? ??? ??? ?numValue1 = ''; ?? ??? ??? ?numValue2 = ''; ?? ??? ??? ?czf = ''; ?? ??? ??? ?ipt.value = '0'; ?? ??? ?} ?? ?} </script>
補(bǔ)充說明:仍有部分bug尚未解決,因作者水平有限,代碼僅供參考。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
html中使用javascript調(diào)用本地程序(exe、doc等)實現(xiàn)代碼
調(diào)用本地程序(exe,doc等)使用html中的javascript實現(xiàn),不可思議吧,接下來為大家詳細(xì)介紹下,感興趣的朋友可以參考下哈2013-04-04JavaScript實現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02BootStrap智能表單實戰(zhàn)系列(七)驗證的支持
這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(七)驗證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面,都涉及到一個數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗的問題,本文介紹非常詳細(xì),具有參考價值,需要的朋友可以參考下2016-06-06javascript生成img標(biāo)簽的3種實現(xiàn)方法(對象、方法、html)
這篇文章主要介紹了javascript生成img標(biāo)簽的3種實現(xiàn)方法,包括對象、方法、html三種實現(xiàn)方式,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12