html部分
<div class="center">
<form name="calculator">
<input type="button" id="clear" class="btn other" value="AC" />
<input type="text" id="display" />
<br>
<input type="button" class="btn number" value="7" onclick="get(this.value);" />
<input type="button" class="btn number" value="8" onclick="get(this.value);" />
<input type="button" class="btn number" value="9" onclick="get(this.value);" />
<input type="button" class="btn operator" value="+" onclick="get(this.value);" />
<input type="button" class="btn number" value="4" onclick="get(this.value);" />
<input type="button" class="btn number" value="5" onclick="get(this.value);" />
<input type="button" class="btn number" value="6" onclick="get(this.value);" />
<input type="button" class="btn operator" value="*" onclick="get(this.value);" />
<input type="button" class="btn number" value="1" onclick="get(this.value);" />
<input type="button" class="btn number" value="2" onclick="get(this.value);" />
<input type="button" class="btn number" value="3" onclick="get(this.value);" />
<input type="button" class="btn operator" value="-" onclick="get(this.value);" />
<input type="button" class="btn number" value="0" onclick="get(this.value);" />
<input type="button" class="btn operator" value="." onclick="get(this.value);" />
<input type="button" class="btn operator" value="/" onclick="get(this.value);" />
<input type="button" class="btn other" value="=" onclick="calculates();" />
</form>
</div>
css部分
*{
border: none;
margin: 0;
padding: 0;
}
.center{
background-color: #fff;
border-radius: 50%;
height: 600px;
margin: auto;
width: 600px;
}
form{
background-color: #495678;
box-shadow: 4px 4px #3d4a65;
margin: 160px auto;
padding: 40px 0 30px 40px;
width: 280px;
}
.btn{
outline: none;
cursor: pointer;
font-size: 20px;
height: 45px;
margin: 5px 0 5px 10px;
width: 45px;
}
.btn,#display,
form
{
border-radius: 25px;
}
#display{
outline: none;
background-color: #98d1dc;
box-shadow: inset 6px 6px 0 #3facc0;
color: #000;
font-size: 20px;
height: 47px;
text-align: right;
width: 165px;
padding-right: 10px;
margin-left: 10px;
}
.number{
background-color: #72778b;
box-shadow: 0 5px #5f6680;
color: #dededc;
}
.number:active{
box-shadow: 0 2px #5f6680;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-transform: translateY(2px);
transform: translateY(2px);
}
.oprator{
background-color: #dededc;
box-shadow: 0 5px #bebebe;
color: #72778b;
}
.operator:active{
box-shadow: 0 2px #bebebe;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-transform: translateY(2px);
transform: translateY(2px);
}
.other{
background-color: #e3844c;
box-shadow: 0 5px #e76a3d;
color: #dededc;
}
.other:active{
box-shadow: 0 2px #e76a3d;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-transform: translateY(2px);
transform: translateY(2px);
}
javascript部分
document.getElementById('clear').addEventListener('click', function () {
document.getElementById('display').value = '';
});
function get(value) {
document.getElementById('display').value += value;
}
function calculates() {
var result = 0;
result = document.getElementById('display').value;
document.getElementById('display').value = '';
document.getElementById('display').value = eval(result);
}