用HTML和js做一个简单的计算器

最新推荐文章于 2023-08-20 17:32:12 发布

叶落而知秋！

最新推荐文章于 2023-08-20 17:32:12 发布

阅读量967

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/littielucky/article/details/121956074

版权

效果图如下：
在这里插入图片描述
下面是源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的计算器</title>
		<center>计算器</center>
		<br/>
		
		<style>
			
			#circle{
				width:50px; height:50px;
				font-size: 26px;
				border-radius:50%;
				color:white;
				background: dimgray;
			       }
			
		</style>
		
		<script language="JavaScript">
			function demo(val)
			{
				document.getElementById("txt").value+=val;  //把输入的数字传输到文本框
			}
			
			function showResolt()
			{
				var a=document.getElementById("txt").value;
				var vb=eval(a);
				document.getElementById("txt").value=vb;
			}
		</script>
		
		
	</head>
	
	<body>
		<table 
			align="center"
			border="1"
			cellspacing="0">
			
			<tr >
				<td colspan="4">
					<input type="text" value="" readonly="readonly" 
					style="width: 215px; height: 50px; font-size: 26px; background: cornsilk" id ="txt" />
				</td>
			</tr>
			
			<tr>
				<td><input type="button" value="7"id="circle" onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="8"id="circle" onclick="demo(this.value)"/> </td>
			
				<td><input type="button" value="9"id="circle" onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="+"id="circle" onclick="demo(this.value)"/> </td>							
			</tr>
			
			<tr>
				<td><input type="button" value="4"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="5"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="6"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="-"id="circle"onclick="demo(this.value)"/> </td>							
			</tr>
			
			<tr>
				<td><input type="button" value="1"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="2"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="3"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="*"id="circle"onclick="demo(this.value)"/> </td>							
			</tr>
			
			<tr>
				<td><input type="button" value="0"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="."id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="/"id="circle"onclick="demo(this.value)"/> </td>
				
				<td><input type="button" value="="id="circle"onclick="showResolt(this.value)"/> </td>							
			</tr>
			
		</table>
	</body>
</html>

叶落而知秋！

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用HTML和js做一个简单的计算器

效果图如下：下面是源代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>我的计算器</title> <center>计算器</center> <br/> <style> #circle{ width:50px; height:50px; font-siz
复制链接

扫一扫