快捷導(dǎo)航

JavaScript仿windows計(jì)算器功能

更新時(shí)間：2022年07月29日 11:53:39 作者：緈福的街口??已于?2022-06-14?09:45:10?修改??163

這篇文章主要為大家詳細(xì)介紹了JavaScript仿windows計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript仿windows計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

任務(wù)要求：

名稱：仿windows計(jì)算器功能：

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

使用的知識(shí)點(diǎn):

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

綜合練習(xí)的目的:

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

成品效果圖：

html頁(yè)面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>計(jì)算器</title>
<link rel="stylesheet" type="text/css" href="計(jì)算器.css">
<script type="text/javascript" src="計(jì)算器.js"></script>
<!-- <script type="text/javascript" src="js/mooc.js"></script> -->

</head>
<body onload="init()">
?? ?<div id="div1">
?? ??? ?<!-- form與后臺(tái)進(jìn)行傳遞 -->
?? ??? ?<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頁(yè)面：

*{
?? ?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;
}

/*偽類：產(chǎn)生浮動(dòng)，銀灰色*/
input[type="button"]:hover{
?? ?background-color: silver;
}

js頁(yè)面：

function init(){
?? ?var num=document.getElementById("num");
?? ?num.value=0;
?? ?num.disabled="disabled";//不能輸入

?? ?// 通過(guò)標(biāo)簽獲取input的數(shù)組，進(jìn)行遍歷，通過(guò)this.value輸出單擊當(dāng)前按鈕的值
?? ?// 事件添加
?? ?var objButton=document.getElementsByTagName("input");
?? ?var btn_num1;//中間變量
?? ?var fh;//加減乘除符號(hào)
?? ?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 ".":
?? ??? ??? ??? ??? ??? ?// 自定義函數(shù)（規(guī)則），判斷是否有小數(shù)點(diǎn)
?? ??? ??? ??? ??? ??? ?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("除數(shù)不能為0");
?? ??? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ??? ??? ?num.value=btn_num1/Number(num.value);
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?}
}

// 正負(fù)號(hào)
function sign(n){
?? ?//乘以-1
?? ?n=Number(n)*-1;
?? ?return n;
}

// 退位，若只有一位，先進(jìn)行截取
function back(n){
?? ?n=n.substr(0,n.length-1);
?? ?if(isNull(n)){
?? ??? ?n=0;
?? ?}
?? ?return n;
}

// 小數(shù)點(diǎn)
function dec_number(n){
?? ?// 小數(shù)點(diǎn)不存在
?? ?if(n.indexOf(".")==-1){
?? ??? ?n=n+".";
?? ?}
?? ?return n;
}

// 驗(yàn)證文本框是否為空或者0
function isNull(n){
?? ?if(n=="0" || n.length==0){
?? ??? ?return true;
?? ?}else{
?? ??? ?return false;
?? ?}
}

// isNaN判斷是否轉(zhuǎn)換為數(shù)字-->可以為false，不能為true
function isNumber(n){
?? ?return !isNaN(n);
}

網(wǎng)頁(yè)效果圖：