<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
/*样式部分*/
<style>
*{
margin: 0;
padding: 0;
}
.tab{
border: 5px solid gainsboro;
border-collapse: collapse;
border-radius: 3px;
width: 300px;
height: 450px;
margin: 100px auto;
background-image:url(../img/58748fcc69401b347e0be3b7.jpg);
}
.tr1{
width: 300px;
height: 60px;
font-size: 20px;
color: red;
text-align: center;
font-family: helvetica;
}
.tr{
background-color: whitesmoke;
width: 300px;
height: 60px;
text-align: right;
}
#display{
width: 300px;
height: 60px;
}
.data{
width: 60px;
height: 55px;
text-align: center;
font-size: 20px;
margin-left: 8px;
}
.data:hover{
background-color: paleturquoise;
cursor: pointer;
}
</style>
/*脚本部分*/
<script>
function get(value){
document.getElementById("display").value+=value;
}
function calculates() {//计算
var result = 0;
result = document.getElementById("display").value;
document.getElementById("display").value = eval(result);
}
function del(){//删除
document.getElementById("display").value="";
}
function sqrt(){//开方
document.getElementById("display").value=Math.sqrt(document.getElementById("display").value)
}
function back(){//退格
document.getElementById("display").value=document.getElementById("display").value.substring(0,document.getElementById("display").value.length-1);
}
</script>
</head>
<body>
<table class="tab" >
<tr class="tr1">
<td colspan="4">标准计算器</td>
</tr>
<tr class="tr">
<td colspan="4"><input type="text" id="display"/> </td>
</tr>
<tr>
<td ><input type="button" class="data" value="CE"onclick="back()"/></td>
<td ><input type="button" class="data" value="C" onclick="del()"/></td>
<td ><input type="button" class="data" value="√" onclick="sqrt()"/></td>
<td ><input type="button" class="data" value="/" onclick="get(this.value)"/> </td>
</tr>
<tr>
<td><input type="button" class="data" value="7" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="8" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="9" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="*" onclick="get(this.value)"/></td>
</tr>
<tr>
<td><input type="button" class="data" value="4" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="5" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="6" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="-" onclick="get(this.value)"/></td>
</tr>
<tr>
<td><input type="button" class="data" value="1" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="2" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="3" onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="+" onclick="get(this.value)"/></td>
</tr>
<tr>
<td><input type="button" class="data" value="+/-"onclick="get(this.value)"/></td>
<td ><input type="button" class="data" value="0" onclick="get(this.value)"/></td>
<td ><input type="button" class="data" value="." onclick="get(this.value)"/></td>
<td><input type="button" class="data" value="=" onclick="calculates()"/></td>
</tr>
</table>
</body>
</html>
使用JavaScript做的计算器
猜你喜欢
转载自blog.csdn.net/qianqian_blog/article/details/83184958
今日推荐
周排行