簡單寫了一下，總歸來說，對於一個審美不好的人來說美化真的是一個頭疼的事情。
html代碼：
<body>
<div id="demo">
<div id="title">
<b>小王版簡易計算器@1.0</b>
</div>
<div id="show">
<input type="text" id="ShowNumber" name="ShowNumber" class="ShowNumber" value="">
</div>
<div>
---------------------------------------------------------------------
</div>
<div id="number">
<input type="button" class="num" id="7" value="7" onclick="get(this.id)">
<input type="button" class="num" id="8" value="8" onclick="get(this.id)">
<input type="button" class="num" id="9" value="9" onclick="get(this.id)">
<input type="button" class="num" id="/" value="/" onclick="get(this.id)">
<input type="button" class="num" id="<-" value="<-" onclick="tui()" >
<br>
<input type="button" class="num" id="4" value="4" onclick="get(this.id)">
<input type="button" class="num" id="5" value="5" onclick="get(this.id)">
<input type="button" class="num" id="6" value="6" onclick="get(this.id)">
<input type="button" class="num" id="*" value="*" onclick="get(this.id)">
<input type="button" class="num" id="C" value="C" onclick="clearnum()">
<br>
<input type="button" class="num" id="1" value="1" onclick="get(this.id)">
<input type="button" class="num" id="2" value="2" onclick="get(this.id)">
<input type="button" class="num" id="3" value="3" onclick="get(this.id)">
<input type="button" class="num" id="-" value="-" onclick="get(this.id)">
<input type="button" class="num" id="w" value="無" onclick="alert('別點了，這個按鍵沒有作用的！')">
<br>
<input type="button" class="num1" id="0" value="0" onclick="get(this.id)">
<input type="button" class="num" id="." value="." onclick="get(this.id)">
<input type="button" class="num" id="+" value="+" onclick="get(this.id)">
<input type="button" class="num" id="=" value="=" onclick="jisuan()">
</div>
</div>
css代碼
#demo{
text-align: center;
background-color: gray;
height: 400px;
width: 400px;
}
.num{
width: 70px;
height: 70px;
font-size: 40px;
}
.num1{
width: 144px;
height: 70px;
font-size: 40px;
}
.ShowNumber{
text-align: right;
height: 50px;
width: 355px;
font-size: 40px;
}
#title{
font-size: 30px;
}
js代碼：
var z = 1;
var num = 0;
function get(num){
if(z == 1){
document.getElementById("ShowNumber").value += document.getElementById(num).value;
}
else{
document.getElementById("ShowNumber").value = null;
document.getElementById("ShowNumber").value += document.getElementById(num).value;
z = 1;
}
}
function clearnum(){
// alert("123");
z = 0;
document.getElementById("ShowNumber").value = 0;
document.getElementById("ShowNumber") = focus();
}
function jisuan(){
document.getElementById("ShowNumber").value = eval(document.getElementById("ShowNumber").value);
z = 0;
}
function tui(){
// alert("ShowNumber");
var x = document.getElementById("ShowNumber");
x.value = x.value.substring(0,x.value.length-1);
}
function onload(){
document.getElementById("ShowNumber").focus();
}
簡單寫了一下，代碼比較繁瑣。