JavaScript仿windows計算器功能
本文實例為大傢分享瞭JavaScript仿windows計算器的具體代碼,供大傢參考,具體內容如下
任務要求:
名稱:仿windows計算器功能:
1、實現單擊按鈕錄入數字
2、實現基礎四則運算功能,並添加必要的異常處理,例如,除數為0
3、實現小數點功能並添加異常處理:小數點隻能出現一次
4、實現正負號功能
5、實現退位功能,已經是最後一位時,顯示框顯示為0
6、清屏功能
使用的知識點:
1、利用大量的自定義函數實現業務邏輯
2、靈活運用事件及事件處理
3、培養異常處理的編程方法
4、培養並實踐利用不同思路實現編程
綜合練習的目的:
1、將css、 html和js有效的進行技術組合,實現業務功能
2、鍛煉和培養編程思想,解決問題的能力和方法
3、鍛煉和培養利用多種編程思路,完成預先設定的目標
成品效果圖:
html頁面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>計算器</title> <link rel="stylesheet" type="text/css" href="計算器.css"> <script type="text/javascript" src="計算器.js"></script> <!-- <script type="text/javascript" src="js/mooc.js"></script> --> </head> <body onload="init()"> <div id="div1"> <!-- form與後臺進行傳遞 --> <div id="div2"> <input type="text" name="num" id="num"> </div> <div id="div3"> <input type="button" value="c" name="" id=""> <input type="button" value="←" name="" id=""> <input type="button" value="+/-" name="" id=""> <input type="button" value="÷" name="" id=""> <input type="button" value="1" name="" id=""> <input type="button" value="2" name="" id=""> <input type="button" value="3" name="" id=""> <input type="button" value="×" name="" id=""> <input type="button" value="4" name="" id=""> <input type="button" value="5" name="" id=""> <input type="button" value="6" name="" id=""> <input type="button" value="-" name="" id=""> <input type="button" value="7" name="" id=""> <input type="button" value="8" name="" id=""> <input type="button" value="9" name="" id=""> <input type="button" value="+" name="" id=""> <input type="button" value="0" name="" id="btn2"> <input type="button" value="." name="" id=""> <input type="button" value="=" name="" id=""> <!-- <input type="button" value="m" name="" id="imooc" > --> </div> </div> </body> </html>
css頁面:
*{ margin: 0px; padding: 0px; } div{ width: 220px; border-radius: 5px; } #div1{ top: 60px; left: 100px; position: relative; background-image: url(image/7.png); background-size: 108%; } input[type="button"]{ position: relative; left: 3px; top: 3px; width: 40px; height: 30px; margin: 5px ; border: 5px; /*圓弧度*/ border-radius: 10px; font-size: 20px; /*不透明度*/ opacity:0.85; } input[type="text"]{ width: 205px; height: 30px; position: relative; top: 3px; left: 8px; font-size: 20px; text-align: right; background-color: #ffffff; /*border: 1px solid;*/ /*不延伸,用已存在的*/ box-sizing: border-box; padding-right: 5px; } #btn2{ width: 93px; } /*偽類:產生浮動,銀灰色*/ input[type="button"]:hover{ background-color: silver; }
js頁面:
function init(){ var num=document.getElementById("num"); num.value=0; num.disabled="disabled";//不能輸入 // 通過標簽獲取input的數組,進行遍歷,通過this.value輸出單擊當前按鈕的值 // 事件添加 var objButton=document.getElementsByTagName("input"); var btn_num1;//中間變量 var fh;//加減乘除符號 for(var i=0;i<objButton.length;i++){ objButton[i].onclick=function(){ if(isNumber(this.value)){ // num.value=(num.value+this.value)*1; if(isNull(num.value)){ num.value=this.value; }else{ num.value=num.value+this.value; } }else{ var btn_num=this.value; // var btn_num1; switch(btn_num){ case "+": btn_num1=Number(num.value); num.value=0; fh="+"; break; case "-": btn_num1=Number(num.value); num.value=0; fh="-"; break; case "×": btn_num1=Number(num.value); num.value=0; fh="×"; break; case "÷": btn_num1=Number(num.value); num.value=0; fh="÷"; break; case ".": // 自定義函數(規則),判斷是否有小數點 num.value=dec_number(num.value); break; case "←": num.value=back(num.value); break; case "c": num.value=0; break; case "+/-": num.value=sign(num.value); break; case "=": switch(fh){ case "+": num.value=btn_num1+Number(num.value); break; case "-": num.value=btn_num1-Number(num.value); break; case "×": num.value=btn_num1*Number(num.value); break; case "÷": if(Number(num.value)==0){ alert("除數不能為0"); }else{ num.value=btn_num1/Number(num.value); } break; } break; } } } } } // 正負號 function sign(n){ //乘以-1 n=Number(n)*-1; return n; } // 退位,若隻有一位,先進行截取 function back(n){ n=n.substr(0,n.length-1); if(isNull(n)){ n=0; } return n; } // 小數點 function dec_number(n){ // 小數點不存在 if(n.indexOf(".")==-1){ n=n+"."; } return n; } // 驗證文本框是否為空或者0 function isNull(n){ if(n=="0" || n.length==0){ return true; }else{ return false; } } // isNaN判斷是否轉換為數字-->可以為false,不能為true function isNumber(n){ return !isNaN(n); }
網頁效果圖:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。