<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.box{
position: absolute;
height: 500px;
width: 350px;
border: 2px solid black;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
margin: auto auto;
}
input{
width: 294px;
height: 60px;
padding: 10px;
margin: 10px;
line-height: 60px;
font-size: 20px;
}
button{
width: 100px;
height: 40px;
font-size: 18px;
padding: 8px;
margin: 5px;
vertical-align: middle;
}
.box1-1,.box1-2,.box1-3,.box2-1{
float:inline-start;
margin: 0,auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1-1">
<input type="text" id="inp" disabled/>
</div>
<div class="box2-1">
<button onclick="clr();">Clr</button>
<button onclick="back();">Del</button>
<button onclick="cal();">=</button>
</div>
<div class="box1-2">
<button onclick="addStr(1);">1</button>
<button onclick="addStr(2);">2</button>
<button onclick="addStr(3);">3</button><br/>
<button onclick="addStr(4);">4</button>
<button onclick="addStr(5);">5</button>
<button onclick="addStr(6);">6</button><br/>
<button onclick="addStr(7);">7</button>
<button onclick="addStr(8);">8</button>
<button onclick="addStr(9);">9</button><br/>
<button onclick="addStr(0);">0</button>
<button onclick="addStr('.');">.</button>
<button onclick="addStr('/');">/</button><br/>
</div>
<div class="box1-3">
<button onclick="addStr('+');">+</button>
<button onclick="addStr('-');">-</button>
<button onclick="addStr('*');">*</button>
</div>
</div>
<script>
function addStr(s){
var inp=document.getElementById('inp');
inp.value=inp.value+s;
}
function cal(){
var inp=document.getElementById('inp');
val=eval(inp.value);
inp.value=val;
}
function clr(){//清除
var inp=document.getElementById('inp');
inp.value='';
}
function back(){//删除最后一个字符
var inp=document.getElementById('inp');
var str=inp.value.substr(0,inp.value.length-1);
inp.value=str;
}
</script>
</body>
</html>
JavaScript实现简单计算器(加减乘除)
最新推荐文章于 2022-12-06 19:00:24 发布