用JavaScript实现一个简单的计算器

最新推荐文章于 2024-07-29 11:53:27 发布

咖啡，巫师与猫

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量278

点赞数

文章标签： javascript css js html css3

本文链接：https://blog.csdn.net/zysp158/article/details/116174921

版权

Html文件的代码

<!DOCTYPE html>
<html>
<head>
	<title>Welcome Online Calculator!</title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
	<script type="text/javascript" src="calculator.js"></script>
</head>
<body onload="initCalculator()">
    <div class="div1">
        <div class="div2">
            <input type="text" name="numText" id="numText">
        </div>
        <div class="div3">
         <input type="button" name="num" id="" value="c">
         <input type="button" name="num" id="" value="←">
         <input type="button" name="num" id="" value="+/-">
         <input type="button" name="num" id="" value="/">
         <input type="button" name="num" id="" value="1">
         <input type="button" name="num" id="" value="2">
         <input type="button" name="num" id="" value="3">
         <input type="button" name="num" id="" value="*">
         <input type="button" name="num" id="" value="4">
         <input type="button" name="num" id="" value="5">
         <input type="button" name="num" id="" value="6">
         <input type="button" name="num" id="" value="-">
         <input type="button" name="num" id="" value="7">
         <input type="button" name="num" id="" value="8">
         <input type="button" name="num" id="" value="9">
         <input type="button" name="num" id="" value="+">
         <input type="button" name="num" id="" value="0">
         <input type="button" name="num" id="" value=".">
         <input type="button" name="num" id="" value="=">
         <input type="button" name="num" id="m" value="m">      
        </div>
    </div>

</body>
</html>

Css文件的代码

/*把所有的边距设为0，取消默认边距。*/
*{
    padding: 0px;
    margin: 0px;
}
div{
     
}
/*设置计算器整体的宽度和位置。*/
.div1{
    width: 180px;
    top: 180px;
    left: 180px;
    position: absolute;
}

/*设置文本框的宽度。*/
input[type = "text"]{
    width: 148px;
    text-align: right;
    background-color: #ffffff;
    border: 1px solid;
}
/*设置按钮的宽度和距离。*/
input[type = "button"]{
	width: 30px;
    margin-right: 5px;
}

/*设置按钮的悬浮效果。*/
input[type = "button"]:hover{
    background-color: #00ffff;
}

Js文件的代码

//初始化计算器。 
function initCalculator(){
    var numText = document.getElementById("numText");
    numText.value = "0";   //设置文本框的默认值。
    numText.disabled = "disabled";   //文本框的禁用。

    
    // 通过标签名获得元素的数组。
    var numButton = document.getElementsByTagName("input");
    

    var preNumText;
    var operator;
    
    // 给所有的元素添加单击事件。
    for(i = 0; i < numButton.length; i++){
    	numButton[i].onclick = function(){
             if(isNumber(this.value)){
             	if(isNull(numText.value)){
             	    numText.value = this.value;
             	}else{
             	    numText.value = numText.value + this.value;
             	}
                
             }else{
                
                      var btn_num = this.value;
                switch(btn_num){
                    case "+":
                    preNumText = Number(numText.value);
                    numText.value = "";
                    operator = "+";
                    break;
                    case "-":
                    preNumText = Number(numText.value);
                    numText.value = "";
                    operator = "-";
                    break;
                    case "*":
                    preNumText = Number(numText.value);
                    numText.value = "";
                    operator = "*";
                    break;
                    case "/":
                    preNumText = Number(numText.value);
                    numText.value = "";
                    operator = "/";
                    break;
                    case ".":
                    numText.value = decNumber(numText.value);
                    break;
                    case "+/-":
                    numText.value = signChange(numText.value);
                    break;
                    case "c":
                    numText.value = "0";
                    break;
                    case "←":
                    numText.value = numBack(numText.value);
                    break;
                    case "=":
                    switch(operator){
                    	case"+":
                          numText.value = preNumText + Number(numText.value);
                       break;
                        case"-":
                          numText.value = preNumText - Number(numText.value);
                       break;
                        case"*":
                          numText.value = preNumText * Number(numText.value);
                       break;
                        case"/":
                        if(Number(numText.value) == 0){
                          numText.value = "0";
                          alert("除数不能为0.");
                          }else{
                          numText.value = preNumText / Number(numText.value);
                          }
                      
                       break;
                    }
                    break;
                }
             	
             }
    	}
    }
}

// 判断是否为数字。
function isNumber(n){
	return !isNaN(n);
}

// 判断是否为空。
 function isNull(x){
 	 return x == "0" || x.length == 0;
 }

// 数字添加小数点。
function decNumber(n){
	if(n.indexOf(".") == -1){
	    n = n + ".";
	}

    return n;

}

// 回退按钮的实现。
function numBack(n){
	n = n.substr(0, n.length-1);
    if(isNull(n)){
    	n = "0";
    }

    return n;
}

// 数字正负号的切换。
function signChange(n){
    n = Number(n)*-1;
    return n;
}

咖啡，巫师与猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现一个简单的计算器

Html文件的代码<!DOCTYPE html><html><head> <title>Welcome Online Calculator!</title> <link rel="stylesheet" type="text/css" href="calculator.css"> <script type="text/javascript" src="calculator.js"></script&g
复制链接

扫一扫