<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算机</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1{
width: 222px;
height:270px;
background: #F8F8F8;
margin: 100px auto;
border: 1px solid #9acfea;
}
.div2{
width:200px;
height:35px;
background: #ffffff;
margin:10px;
text-align: right;
line-height:35px;
padding-right:5px;
font-size: 18px;
}
table{
margin: 10px;
}
td {
box-sizing: border-box;
border: solid 3px rgba(0,0,0,0);
background: #F0F0F0;
}
td:visited{
background:#2aabd2;
}
button{
width: 100%;
height: 100%;
}
#result{
text-align: right;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"><input type="text" id="result" style="border: solid 0px white"></div>
<div >
<table border="0" width="200px" height="200px">
<tr><td colspan="2"><button onclick="rem()">C</button></td><td ><button onclick="del()">←</button></td><td ><button onclick="b(this)" value="+">+</button></td></tr>
<tr><td><button id="a7" onclick="b(this)" value="7">7</button></td><td><button id="a8" onclick="b(this)" value="8">8</button></td><td><button id="a9" onclick="b(this)" value="9">9</button></td><td ><button onclick="b(this)" value="-">-</button></td></tr>
<tr><td><button id="a4" onclick="b(this)" value="4">4</button></td><td><button id="a5" onclick="b(this)" value="5">5</button></td><td><button id="a6" onclick="b(this)" value="6">6</button></td><td ><button onclick="b(this)" value="*">×</button></td></tr>
<tr><td><button id="a1" onclick="b(this)" value="1">1</button></td><td><button id="a2" onclick="b(this)" value="2">2</button></td><td><button id="a3" onclick="b(this)" value="3">3</button></td><td ><button onclick="b(this)" value="/">÷</button></td></tr>
<tr><td><button id="a0" onclick="b(this)" value="0">0</button></td><td><button onclick="b(this)" value=".">.</button></td><td colspan="2"><button id="bt" onclick="op()">=</button></td></tr>
</table>
</div>
</div>
<script>
var str;
function b(elelm) {
str=document.getElementById("result");
str.value=str.value+elelm.value;
}
function op() {
var pat1=/[-]?[0-9]*\.?[0-9]+/;
var pat2=/\d[\+\-\*/][-]?[0-9]*\.?[0-9]+/;
var pat3=/[+/-][0-9]*\.?[0-9]+/;
var pat6=/[*/\/][0-9]*\.?[0-9]+/;
var pat4=/\d[\+\-\*/]/;
var pat5=/[\+\-\*/]/;
var pat7=/[\+\-\*/][\+\*/]/;
var pat8=/[\+\-\*/][\-]/;
var pat9=/[\+\-\*/][\-][0-9]*[\.]?[0-9]+/;
var p1=pat5.exec(pat4.exec(str.value));//运算符
var p2=pat7.exec(str.value);
var nos2=str.value.search(pat7);
var nos3=str.value.search(pat8);
if (nos2!==-1){
alert("输入有误请重新输入！");
str.value = "";
return;
}else {
//第二个数为负数的情况
if (nos3!==-1){
if (p1[0]==="+" || p1[0]==="-"){
var a1=pat1.exec(str.value);//第一个数字
var a2=pat9.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
var a3=pat3.exec(a2);//第二个数字
str.value=((10*parseFloat(a1))+10*parseFloat(a3))/10;
}else {
if (p1[0]==="*" || p1[0]==="/"){
var a1=pat1.exec(str.value);//第一个数字
var a2=pat9.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
var a3=pat1.exec(a2);//第二个数字
if (p1[0]==="*"){
str.value=(1000*parseFloat(a1)*(1000*parseFloat(a3)))/1000000;
}else{
str.value=(1000*parseFloat(a1)/(1000*parseFloat(a3)));
}
}
}
}else{
if (p1[0]==="+" || p1[0]==="-"){
var a1=pat1.exec(str.value);//第一个数字
var a2=pat2.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
var a3=pat3.exec(a2);//第二个数字
str.value=((1000*parseFloat(a1))+1000*parseFloat(a3))/1000;
}else {
if (p1[0]==="*" || p1[0]==="/"){
var a1=pat1.exec(str.value);//第一个数字
var a2=pat6.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
var a3=pat1.exec(a2);//第二个数字
if (p1[0]==="*"){
str.value=(1000*parseFloat(a1)*(1000*parseFloat(a3)))/1000000;
}else{
if (a3==0){
str.value="除数不能为0";
return;
}
str.value=(1000*parseFloat(a1)/(1000*parseFloat(a3)));
}
}
}
}
}
}
function del() {
str.value = str.value.replace(/.$/,'');
}
function rem() {
str.value = "";
}
</script>
</body>
</html>
博客列表 >小计算器
小计算器
- 廖磊的博客原创转载
- 2017年07月26日 23:05:58849浏览
上一条：仿Windows10日历下一条：加载的图片太多？快试试懒加载！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
