溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么用javascript實現計算器功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
用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實現計算器功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
