<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简易在线计算器</title>
</head>
<body>
<script type="text/javascript">
var numresult;
var str;
//让nummessage接收所有数据
function onclicknum(nums){
str = document.getElementById("nummessage");
str.value=str.value + nums;
}
//清空显示栏的信息
function onclickclear(){
str = document.getElementById("nummessage");
str.value = "";
}
//显示储存的结果;
function onclickresult(){
str=document.getElementById("nummessage");
numresult = eval(str.value);
str.value=numresult;
}
</script>
<div style="font-size:23px; font-size:25px; border:0px;top:0; left:0;bottom:0;right:0;margin:auto auto">网页版简单计算器</div>
<table border="2" align="center" bgColor="pink"
style="height: 350px; width: 270px ;border-collapse:collapse;">
<tr>
<td colspan="4" align="center"><input type="text" id="nummessage" style="height: 90px; width: 99.5%; font-size: 50px;border:0px;text-align:right">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" id="Del"value="clear" οnclick="onclickclear()" style="height: 70px; width:100%; font-size: 35px">
</td>
<td colspan="2"><input type="button" id="result" value="=" οnclick="onclickresult()" style="height: 70px; width: 100%; font-size: 35px">
</td>
</tr>
<tr>
<td><input type="button" id="7" value="7" οnclick="onclicknum(7)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="8" value="8" οnclick="onclicknum(8)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="9" value="9" οnclick="onclicknum(9)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="mul" value="*" οnclick="onclicknum('*')" style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td><input type="button" id="4" value="4" οnclick="onclicknum(4)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="5" value="5" οnclick="onclicknum(5)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="6" value="6" οnclick="onclicknum(6)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="division" value="/" οnclick="onclicknum('/')" style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td><input type="button" id="1" value="1" οnclick="onclicknum(1)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="2" value="2" οnclick="onclicknum(2)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="3" value="3" οnclick="onclicknum(3)" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="sub" value="-" οnclick="onclicknum('-')" style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td colspan="2"><input type="button" id="0" value="0" οnclick="onclicknum(0)" style="height: 70px; width: 100%; font-size: 35px">
</td>
<td><input type="button" id="." value="." οnclick="onclicknum('.')" style="height: 70px; width: 90px; font-size: 35px">
</td>
<td><input type="button" id="add" value="+" οnclick="onclicknum('+')" style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
</table>
</body>
</html>
展示的效果:
我们来计算下:(6+2)*3/6;
验证一下结果:
是不是挺好用的呢,一起来做一个吧;