站長資訊網
用javascript實現計算器功能的方法：【function init(){ var num=document.getElementById("num"); num.value=0; var btn_num1; var fh; …】。
本文操作環境：windows10系統、javascript 1.8.5、thinkpad t480電腦。
想必大家在學習編程語言的過程中都曾寫過計算器功能，比如使用php、java、python等語言。那么你有沒有使用過javascript實現過計算器功能呢？其實原理都是一樣的，讓我們一起來看看吧！
HTML代碼：
<!DOCTYPE html> <html> <head> <title>js計算器</title> <link rel="stylesheet" type="text/css"href="index.css"> <script type="text/javascript" src="index.js"> </script> </head> <body onload="init()"> <!-- 1個文本框10個數字....20個按鈕 --> <div id="div1"> <form action=""> <div id="div2"> <input type="text" name="num" disabled="disabled" id="num" value="0"> </div> </form> <div id="div3"> <input type="button" name="" value="C" id="baidu"> <input type="button" name="" value="←" id=""> <input type="button" name="" value="+/-" id=""> <input type="button" name="" value="/" id=""> <input type="button" name="" value="7" id=""> <input type="button" name="" value="8" id=""> <input type="button" name="" value="9" id=""> <input type="button" name="" value="*" id=""> <input type="button" name="" value="4" id=""> <input type="button" name="" value="5" id=""> <input type="button" name="" value="6" id=""> <input type="button" name="" value="-" id=""> <input type="button" name="" value="1" id="" > <input type="button" name="" value="2" id="" > <input type="button" name="" value="3" id="" > <input type="button" name="" value="+" id=""> <input type="button" name="" value="0" id=""> <input type="button" name="" value="=" id=""> <input type="button" name="" value="." id=""> <input type="button" name="" value="AC" id=""> </div> </div> </body> </html>`
JS代碼：
function init(){ var num=document.getElementById("num"); num.value=0; var btn_num1; var fh; num.disabled="disabled"; // var n1=document.getElementById("n1"); // n1.οnclick=function(){ // } var oButton=document.getElementsByTagName("input"); for(var i=0;i<oButton.length;i++){ oButton[i].onclick=function(){ if(isnumber(this.value)){ //num.value=(num.value+this.value)*1;//把默認0消除 if(isNull(num.value)){ num.value=this.value; }else{ num.value=num.value+this.value; } }else{ //測試功能是否正確 // alert("bushishuzi") var btn_num=this.value; //測試功能是否正確（彈窗） // alert(btn_num); switch(btn_num){ case "+": // alert(11); btn_num1=num.value*1;//=parseInt(num.value)這個也可以,后面的話需要改為number num.value=0; fh="+"; break; case "-": btn_num1=num.value*1; num.value=0; fh="-"; break; case "*": btn_num1=num.value*1; num.value=0; fh="*"; break; case "/": btn_num1=num.value*1; num.value=0; fh="/"; break; case ".": num.value=dec_number(num.value); break; case "←": num.value=back(num.value); break; case "+/-": num.value=sign(num.value); break; case "AC": num.value="0"; break; case "C": init_baidu(); break; case "=": switch(fh){ case"+": num.value=btn_num1+num.value*1; break; case"-": num.value=btn_num1-num.value*1; break; case"*": num.value=btn_num1*num.value*1; break; case"/": if(num.value==0){ num.value=0; alert("除數不能為0"); }else{ num.value=btn_num1/num.value*1; } break; } break; } } } } } //小數點的功能 function dec_number(n){ if(n.indexOf(".")==-1){ n=n+"."; } return n; } //驗證文本框是否為空或者為0 function isNull(n){ if(n*1==0||n.length==0){ return true; }else{ return false; } } //退位鍵 function back(n){ n=n.substr(0,n.length-1); if(isNull(n)){ n="0"; } return n; } //正負號+/- function sign(n){ if(n.indexOf("-")==-1){ n="-"+n; }else{ n=n.substr(1,n.length); } return n; } //isNaN:不能轉換成數字：true,可以轉換成數字是false function isnumber(n){ return !isNaN(n); } //C按鈕使用一個超級鏈接，鏈接到百度，這個可以隨便發揮 function init_baidu(){ window.location.href="http://www.baidu.com"; }
CSS代碼：
*{ margin:0px; padding:0px; } div{ width:170px; } #div1{ top:60px; left: 100px; position:absolute; } input[type="button"]{ width:30px; margin-right: 5px; } input[type="text"]{ width:147px; text-align: right; background-color:white; border:1px solid; padding-right:1px; box-sizing:content-box; } input[type="button"]:hover{/*//偽類和按鈕的使用*/ background-color:white; border:1px solid; }
推薦學習：javascript視頻教程
