<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 400px;
/* height: 400px; */
background-color: #6C6C6C;
padding: 20px;
}
.xsp {
width: 300px;
height: 40px;
margin: 0 auto;
background-color: white;
line-height: 40px;
}
.anjan {
background-color: #11B006;
width: 400px;
/* height: 300px; */
margin-top: 40px;
}
button {
display: inline-block;
width: 100px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="xsp" id="first">
</div>
<div class="anjan">
<button onclick="jsq('1')">1</button>
<button onclick="jsq('2')">2</button>
<button onclick="jsq('3')">3</button>
<button onclick="jsq('4')">4</button>
<button onclick="jsq('5')">5</button>
<button onclick="jsq('6')">6</button>
<button onclick="jsq('7')">7</button>
<button onclick="jsq('8')">8</button>
<button onclick="jsq('9')">9</button>
<button onclick="jsq('0')">0</button>
<button onclick="jsq('-')">-</button>
<button onclick="jsq('+')">+</button>
<button onclick="jsq('*')">*</button>
<button onclick="jsq('/')">/</button>
<button onclick="dy()">=</button>
<button onclick="sc()">Delete</button>
</div>
</div>
<script>
var _first = document.getElementById("first");
function jsq(param) {
_first.innerText = _first.innerText+param
}
function dy(){
_first.innerText=eval(_first.innerText)
}
function sc(){
_first.innerText=null
}
</script>
</body>
</html>
页面效果