直接上效果图:
**
css代码:
**
<style>
table {
border: 1px solid #666;
width: 300px;
height: 400px;
margin: auto;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
td {
width: 25%;
height: 16.67%;
border: 2px solid rgb(255, 192, 203);
text-align: center;
line-height: 16.67%;
}
.tr-1 td {
background-color: #fff;
}
button {
width: 100%;
height: 100%;
font-size: 20px;
outline: none;
background-color: rgb(255, 192, 203);
}
input {
background-color: rgb(255, 192, 203);
width: 100%;
height: 100%;
font-size: 20px;
text-align: right;
}
</style>
**
HTML部分:
**
<table>
<tr class="tr-1">
<td colspan="4">
<input type="text" name="screenName" id="screenName">
</td>
</tr>
<tr>
<td>
<button name="C" value="C" onclick="clearNum()">C</button>
</td>
<td>
<button name="DEL" value="DEL" onclick="tuiGe()">DEL</button>
</td>
<td>
<button id="%" value="%" onclick="jsq(this.id)">%</button>
</td>
<td>
<button id="/" value="/" onclick="jsq(this.id)">/</button>
</td>
</tr>
<tr>
<td><button id="7" value="7" onclick="jsq(this.id)">7</button></td>
<td><button id="8" value="8" onclick="jsq(this.id)">8</button></td>
<td><button id="9" value="9" onclick="jsq(this.id)">9</button></td>
<td><button id="*" value="*" onclick="jsq(this.id)">*</button></td>
</tr>
<tr>
<td><button id="4" value="4" onclick="jsq(this.id)">4</button></td>
<td><button id="5" value="5" onclick="jsq(this.id)">5</button></td>
<td><button id="6" value="6" onclick="jsq(this.id)">6</button></td>
<td><button id="-" value="-" onclick="jsq(this.id)">-</button></td>
</tr>
<tr>
<td><button id="1" value="1" onclick="jsq(this.id)">1</button></td>
<td><button id="2" value="2" onclick="jsq(this.id)">2</button></td>
<td><button id="3" value="3" onclick="jsq(this.id)">3</button></td>
<td><button id="+" value="+" onclick="jsq(this.id)">+</button></td>
</tr>
<tr>
<td><button id="0" value="0" onclick="jsq(this.id)">0</button></td>
<td><button id="." value="." onclick="jsq(this.id)">.</button></td>
<td colspan="2"><button name="=" value="=" onclick="eva()">=</button></td>
</tr>
</table>
**
JS部分:
**
<script>
var num = 0;
function jsq(num) {
if (num == "%") {
document.getElementById('screenName').value = Math.round(document.getElementById('screenName').value) / 100;
} else {
document.getElementById('screenName').value += document.getElementById(num).value;
}
}
function tuiGe() {
var arr = document.getElementById("screenName");
arr.value = arr.value.substring(0, arr.value.length - 1);
}
function eva() {
document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
}
function clearNum() {
document.getElementById("screenName").value = null;
}
</script>