<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<meta charset="UTF-8">
<title>My Calculator</title>
<style type="text/css">
body{
background-repeat: no-repeat;
background-position: center 3px;
}
.main{
background-color: #d6fae3;
text-align: center;
border: papayawhip dashed 8px;
margin: 0 auto;
width: 700px;
height: 970px;
}
.title{
color: #b3d4fc;
text-align: center;
font-family: 华文彩云;
font-size: 80px;
margin: 0 auto;
width: 700px;
height: 100px;
}
.displayResult{
text-align: center;
margin: 0 auto;
width: 700px;
height: 200px;
}
#result{
background-color: white;
text-align:right;
border: 1px solid black;
font-weight: bolder;
width: 700px;
height: 190px;
}
.key{
margin: 0 auto;
width: 700px;
height: 670px;
}
.tab{
text-align: center;
padding: 10px;
width: 700px;
height: 650px;
}
button{
border-radius: 8px;
font-size: 21px;
width: 150px;
height: 90px;
background-color: #feff8a;
}
.getResult{
border-radius: 8px;
font-size: 21px;
width: 650px;
height: 90px;
background-color: #feff8a;
}
#res{
color: #6399ff;
font-size: 48px;
}
#exp{
color: black;
font-size: 27px;
}
</style>
<script type="text/javascript">
var arr=[];/*用一个数组保存要计算结果的字符串*/
var reg=/,/g; /*正则表达式用来全局搜索数组里面的逗号*/
var s=0; /*接收返回计算结果的字符串*/
function getKeys(key) {
arr.push(key);
/*key传入的是什么,数组就添加什么字符*/
var str= arr.toString().replace(reg,"");/*将字符串里面所有的逗号清空*/
document.getElementById("exp").innerText=str+"";/*将表达式输出在文本域内并显示*/
s=str;
return s;
}
function getResult() {
var rs= eval(s); //eval()方法计算字符串的值
document.getElementById("res").innerText=rs+"";
arr=[]; /*计算完结果清空保存要计算结果的字符串*/
}
function removeAll() {
/*清除显示的所有内容*/
/*把存储键入字符串清空*/ /*清空input框里面所有内容*/
document.getElementById("exp").innerText="";
document.getElementById("res").innerText="";
arr=[];
}
</script>
</head>
<body>
<div class="main">
<div class="title">My Calculator
</div>
<div class="displayResult">
<table id="result">
<tr><td id="exp"></td></tr>
<tr><td id="res"></td></tr>
</table>
</div>
<div class="key">
<table class="tab">
<tr>
<td><button onclick="getKeys(7)">7</button></td>
<td><button onclick="getKeys(8)">8</button></td>
<td><button onclick="getKeys(9)">9</button></td>
<td><button onclick="getKeys('+')">+</button></td>
</tr>
<tr>
<td><button onclick="getKeys(4)">4</button></td>
<td><button onclick="getKeys(5)">5</button></td>
<td><button onclick="getKeys(6)">6</button></td>
<td><button onclick="getKeys('-')">-</button></td>
</tr>
<tr>
<td><button onclick="getKeys(1)">1</button></td>
<td><button onclick="getKeys(2)">2</button></td>
<td><button onclick="getKeys(3)">3</button></td>
<td><button onclick="getKeys('*')">*</button></td>
</tr>
<tr>
<td><button onclick="getKeys(0)">0</button></td>
<td><button onclick="getKeys('.')">.</button></td>
<td><button onclick="removeAll()">AC</button></td>
<td><button onclick="getKeys('/')">/</button></td>
</tr>
<tr><td colspan="4"><button class="getResult" onclick="getResult()">=</button></td></tr>
</table>
</div>
</div>
</body>
</html>
网页版的计算器
最新推荐文章于 2022-01-21 20:06:03 发布