使用JavaScript做的计算器

最新推荐文章于 2024-01-14 17:36:20 发布

qianqian_blog

最新推荐文章于 2024-01-14 17:36:20 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/qianqian_blog/article/details/83184958

版权

css 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

javaScript

4 篇文章 0 订阅

订阅专栏

<!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>

效果图