您的位置：首页 > Web前端 > JavaScript

用JavaScript实现简单的计算器

2016-06-09 15:33 651 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="calculator2.css">
</head>
<body>
<div class="result-area">
<input id="result" class="result" type="text" readonly>
</div>
<div class="btn-area">
<button id="btn1" class="btn-top" onclick="append(this)">1</button>
<button id="btn2" class="btn-top" onclick="append(this)">2</button>
<button id="btn3" class="btn-top" onclick="append(this)">3</button>
<button id="btn-add" class="btn-top-right" onclick="append(this)">+</button>
<button id="btn4" class="btn" onclick="append(this)">4</button>
<button id="btn5" class="btn" onclick="append(this)">5</button>
<button id="btn6" class="btn" onclick="append(this)">6</button>
<button id="btn-sub" class="btn-right" onclick="append(this)">-</button>
<button id="btn7" class="btn" onclick="append(this)">7</button>
<button id="btn8" class="btn" onclick="append(this)">8</button>
<button id="btn9" class="btn" onclick="append(this)">9</button>
<button id="btn-mul" class="btn-right" onclick="append(this)">*</button>
<button id="btn0" class="btn" onclick="append(this)">0</button>
<button id="btn-clear" class="btn" onclick="clr()">C</button>
<button id="btn-equal" class="btn" onclick="equal()">=</button>
<button id="btn-div" class="btn-right" onclick="append(this)">/</button>
<button id="btn-left-bracket" class="btn" onclick="append(this)">(</button>
<button id="btn-right-bracket" class="btn" onclick="append(this)">)</button>
<button id="btn-point" class="btn" onclick="append(this)">.</button>
<button id="btn-mod" class="btn-right" onclick="append(this)">%</button>
</div>
</body>
<script type="text/javascript" src="calculator2.js"></script>
</html>



CSS代码

*{
margin: 0;
padding: 0;
}

.result-area{
width: 306px;
margin: 60px auto 0;
}

.result{
width: 304px;
height: 40px;
border: 1px solid #ccc;
text-align: right;
line-height: 40px;
font-size: 2em;
outline: none;
}

.btn-area{
width: 306px;
height: 200px;
margin: 20px auto 0;
}

button{
width: 75px;
height: 40px;
border: 1px solid #ccc;
font-size: 2em;
outline: none;
float: left;
}

.btn-top{
margin-right: 2px;
}

.btn{
margin-right: 2px;
border-top: 0;
}

.btn-right{
border-top: 0;
}



JavaScript代码

var result = document.getElementById("result");
// 按下键向显示框添加键上的数字或符号
function append(obj) {
var btnText = obj.innerText;
var resultText = result.value;

if(!inputValid(resultText, btnText)) {
alert("输入不合法");
return;
}

result.value = result.value + btnText;
}

// 按下清除按钮后清除显示框的内容
function clr() {
result.value = "";
}

// 按下等于键计算显示框表达式的值
function equal() {
if(dividedBy0(result.value)) {
alert("除数不能为0");
clr();
return;
}

try {
result.value = parseFloat(eval(result.value).toFixed(8));
} catch(e) {
alert("输入不合法");
}
}

// 判断输入是否合法,如果输入不完整,那么补"0"或右括号或"0"和右括号结合使表达式完整
function inputValid(str, ch) {
var exp = str + ch;
try {
eval(exp);
return true;
} catch(e) {
try {
eval(exp + "0");
return true;
} catch(e) {
try {
eval(exp + rightBracketsToFill(exp));
return true;
} catch(e) {
try {
eval(exp + "0" + rightBracketsToFill(exp));
return true;
} catch(e) {
return false;
}
}
}
}
}

// 获得需要补齐的右括号的数量,并拼接右括号
function rightBracketsToFill(str) {
var l = 0;
var r = 0;
for(var i = 0; i < str.length; i++) {
var ch = str.charAt(i);
if(ch == "(") {
l++;
}
if(ch == ")") {
r++;
}
}

var rightBrackets = "";
for(var i = 0; i < l - r; i++) {
rightBrackets = rightBrackets + ")";
}
return rightBrackets;
}

// 导致除数为0的子字符串可能是"/0" "%0" "/.0" "%.0"
function dividedBy0WithFormat(str, sub) {
var index = str.indexOf(sub);
if(index < 0) {
return false;
}

if(index + sub.length == str.length) {
return true;
}

for(var i = index + sub.length; i < str.length; i++) {
var ch = str.charAt(i);
if(isNaN(ch) && ch != ".") {
return true;
}

if(!isNaN(ch) && ch > 0) {
return false;
}
}

return true;
}

// 判断除数是否为0
function dividedBy0(str) {
return dividedBy0WithFormat(str, "/0") || dividedBy0WithFormat(str, "%0")
|| dividedBy0WithFormat(str, "/.0") || dividedBy0WithFormat(str, "%.0");
}


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航