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。