javascript實現(xiàn)簡易計算器功能
本文實例為大家分享了javascript實現(xiàn)簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下
功能：
1、實現(xiàn)單擊數(shù)字按鈕輸入數(shù)字2、實現(xiàn)基礎(chǔ)四則運算功能，并添加必要的異常處理，例如：除數(shù)不能為零3、實現(xiàn)小數(shù)點添加功能，并添加異常處理，小數(shù)點只能出現(xiàn)一次4、實現(xiàn)正負號功能5、實現(xiàn)回退功能，已經(jīng)是最后一位時，顯示框顯示為零6、清屏功能
使用的知識點：
1、利用大量的自定義函數(shù)實現(xiàn)業(yè)務(wù)邏輯2、靈活運用事件及事件處理3、培養(yǎng)異常處理的編程方法4、培養(yǎng)并實踐利用不同思路實現(xiàn)編程
綜合練習目的：
1、將CSS、HTML和JS有效的驚醒技術(shù)組合，實現(xiàn)業(yè)務(wù)功能2、鍛煉和培養(yǎng)編程思想，解決問題的能力和方法3、鍛煉和培養(yǎng)利用多種編程思路，完成預(yù)先設(shè)定的目標
頁面效果：
源代碼
html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>簡易計算器</title> <link rel='stylesheet' type='text/css' href='http://www.cgvv.com.cn/bcjs/demo.css' > <script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/demo.js'></script></head><body> <form action='http//:www.baidu.com'> <input type='text' value='0' disabled /><br/> <input type='button' value='C'/> <input type='button' value='←'/> <input type='button' value='+/-'/> <input type='button' value='/'/><br/> <input type='button' value='1'/> <input type='button' value='2'/> <input type='button' value='3'/> <input type='button' value='*'/><br/> <input type='button' value='4'/> <input type='button' value='5'/> <input type='button' value='6'/> <input type='button' value='-'/><br/> <input type='button' value='7'/> <input type='button' value='8'/> <input type='button' value='9'/> <input type='button' value='+'/><br/> <input type='button' value='0'/> <input type='button' value='.'/> <input type='button' value='='/> <input type='button' value='d'/> </form></body></html>
css
*{ margin: 0; padding: 0;}/*內(nèi)外邊距*/input{ width: 160px;}/*寬*/form{ width: 200px; height: 300px; margin: 100px auto 0;}/*寬高；外邊距*/#text{ text-align: right; padding-right: 10px;}/*文字靠右*/.btn:hover{ background: #ccc; border: 2px solid #ccc;}/*背景顏色，邊框*/.btn{ width: 40px; height: 25px; margin-top: 5px;}/*寬高，上邊距*/
js
window.onload = function(){ var t = document.getElementById(’text’);//數(shù)字文本 var num = { //數(shù)字0-9 num1:document.getElementById(’num1’), num2:document.getElementById(’num2’), num3:document.getElementById(’num3’), num4:document.getElementById(’num4’), num5:document.getElementById(’num5’), num6:document.getElementById(’num6’), num7:document.getElementById(’num7’), num8:document.getElementById(’num8’), num9:document.getElementById(’num9’), num0:document.getElementById(’num0’) }; var symbol = { divide:document.getElementById(’divide’),//除 multiply:document.getElementById(’multiply’),//乘 subtract:document.getElementById(’subtract’),//減 add:document.getElementById(’add’),//加 reset:document.getElementById(’reset’),//歸零 back:document.getElementById(’back’),//回退 plus:document.getElementById(’plus’),//正負號 equal:document.getElementById(’equal’),//等于號 point:document.getElementById(’point’),//小數(shù)點 ddd:document.getElementById(’ddd’)//跳百度 }; var n = [];//儲存符號 var sum = ’’;//前面儲存輸入的數(shù)字 var a = false; for(var i in symbol){ symbol[i].onclick = function(){ switch(this.value){ case ’.’ : if(text.value!== '0' && this.value=='.'){ //文本框里數(shù)字不為零，并且輸入小數(shù)點 if(text.value.indexOf('.')!==-1){ // 處理點重復(fù)的問題；文本框里面有小數(shù)點 text.value = text.value; } else { text.value += this.value; } } else { text.value += this.value; } break; case ’+’: if(n != ’+’){ n = this.value; //儲存符號 sum = t.value; //儲存輸入的數(shù)字 t.value = ’0’; //清0 } break; case ’-’: if(n != ’-’){ n = this.value; sum = t.value; t.value = ’0’; } break; case ’*’: if(n != ’*’){ n = this.value; sum = t.value; t.value = ’0’; } break; case ’/’: if(n != ’/’){ n = this.value; sum = t.value; t.value = ’0’; } break; case ’=’: switch(n){ case ’+’: t.value = parseFloat(sum) + parseFloat(t.value); //輸出結(jié)果 n = ’’; //符號清空 break; case ’-’: t.value = parseFloat(sum) - parseFloat(t.value); n = ’’; break; case ’*’: t.value = parseFloat(sum) * parseFloat(t.value); n = ’’; break; case ’/’: if(parseFloat(t.value) == 0){ alert(’除數(shù)不能為0’); t.value=0; } else { t.value = parseFloat(sum) / parseFloat(t.value); n = ’’; } break; } break; case ’←’ : //長度減一 if (t.value.length>1) { t.value = t.value.substr(0,t.value.length-1); } else { t.value = ’0’; } break; case ’C’ : //清0 t.value = 0; break; case ’+/-’ : //點擊一次*-1 t.value = t.value * -1; break; case ’d’: window.open(’http://www.baidu.com’); break; } } } //封裝，點擊數(shù)字輸入到文本域中 function number(numx){ if (t.value == ’0’) { t.value = numx; } else { t.value += numx; } } //輸入數(shù)字 num.num1.onclick = function(){ number(this.value); } num.num2.onclick = function(){ number(this.value); } num.num3.onclick = function(){ number(this.value); } num.num4.onclick = function(){ number(this.value); } num.num5.onclick = function(){ number(this.value); } num.num6.onclick = function(){ number(this.value); } num.num7.onclick = function(){ number(this.value); } num.num8.onclick = function(){ number(this.value); } num.num9.onclick = function(){ number(this.value); } num.num0.onclick = function(){ number(this.value); } }
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP常用日期格式化函數(shù) FormatDate()2. Python 操作 MySQL數(shù)據(jù)庫3. Python數(shù)據(jù)相關(guān)系數(shù)矩陣和熱力圖輕松實現(xiàn)教程4. 開發(fā)效率翻倍的Web API使用技巧5. bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼6. CSS3中Transition屬性詳解以及示例分享7. js select支持手動輸入功能實現(xiàn)代碼8. 什么是Python變量作用域9. vue使用moment如何將時間戳轉(zhuǎn)為標準日期時間格式10. python 如何在 Matplotlib 中繪制垂直線
網(wǎng)公網(wǎng)安備