javascript模擬實現(xiàn)計算器

更新時間：2021年04月06日 16:53:29 作者：“HelloWorld”

這篇文章主要為大家詳細介紹了javascript模擬實現(xiàn)計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript模擬實現(xiàn)計算器的具體代碼，供大家參考，具體內(nèi)容如下

功能:

1、實現(xiàn)單擊按鈕錄入數(shù)字
2、實現(xiàn)基礎四則運算功能，并添加必要的異常處理。
3、實現(xiàn)小數(shù)點功能并添加異常處理：小數(shù)點只能出現(xiàn)一次
4、實現(xiàn)正負號功能
5、實現(xiàn)退位功能，已經(jīng)是最后一位時，顯示框顯示為0
6、AC清屏功能

使用的知識點:

1、利用大量的自定義函數(shù)實現(xiàn)業(yè)務邏輯
2、靈活運用事件及事件處理
3、培養(yǎng)異常處理的編程方法
4、培養(yǎng)并實踐利用不同思路實現(xiàn)編程

綜合練習的目的:

1、將css,html和js有效的進行技術組合，實現(xiàn)業(yè)務功能
2、鍛煉和培養(yǎng)編程思想，解決問題的能力和方法
3、鍛煉和培養(yǎng)利用多種編程思路，完成預先設定的目標

而且最近剛上手js，感覺特別有趣，學習java基礎的時候沒有那么大的興趣。感覺剛一上手js感覺特別好玩有趣，在這里把一個簡單的計算器源碼展示出來：

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個數(shù)字....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("除數(shù)不能為0");
 }else{
 num.value=btn_num1/num.value*1;
 }
 break;
 }
 break;
 }
 }
 }
 }
}
//小數(shù)點的功能
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:不能轉換成數(shù)字：true,可以轉換成數(shù)字是false
function isnumber(n){
 return !isNaN(n);
 }
 //C按鈕使用一個超級鏈接，鏈接到百度，這個可以隨便發(fā)揮
function init_baidu(){
 window.location.;
}

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;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: