其他分享
首页 > 其他分享> > 学习html的第二天（计算器）

学习html的第二天（计算器）

作者：互联网

做一个简单地计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算机</title>
		<style>
			input{width: 50px;height: 50px; font-size: 26px; color: green; background-color: yellow;}
			.w{width: 50px;height: 50px; font-size: 26px; color: red; background-color: green;border-radius:50%;}
		</style>
	</head>
	<body bgcolor="39c5bb">
		<center><font size="8" color="black" style="font-weight: bold;">
			我的计算机
		</font></center>
		
		<script language="JavaScript">
			function demo(val){
				//首先使文本框显示点击的数字并且排列
				document.getElementById("txt").value+=val;
			}
			function showResult(){
				//获取上边显示的并赋值给a
				var a = document.getElementById("txt").value;
				//使用eval运算a
				var vb=eval(a);
				//显示得出的结果
				document.getElementById("txt").value=vb;
			}
		</script>
		
		<table border="3" align="center">
			<tr>
				<td colspan="4"> 
				<input type="text" value="" readonly="readonly" style="width: 215px;height: 50px;font-size: 26px; color: green; background-color:yellow" id="txt"/>
				</td>
			</tr>
			<tr>
				<td><input type="button" value="7" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="8" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="9" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="/" class="w" οnclick="demo(this.value)"</td>
			</tr>
			<tr>
				<td><input type="button" value="4" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="5" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="6" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="*" class="w" οnclick="demo(this.value)"</td>
			</tr>
			<tr>
				<td><input type="button" value="1" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="2" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="3" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="+" class="w" οnclick="demo(this.value)"</td>
			</tr>
			<tr>
				<td><input type="button" value="0" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="." class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="-" class="w" οnclick="demo(this.value)"</td>
				<td><input type="button" value="=" class="w" οnclick="showResult(this.value)"</td>
			</tr>
		</table>
	</body>
</html>

这个是成果图
在这里插入图片描述

标签：document,color,50px,getElementById,value,第二天,html,计算器,txt
来源： https://blog.csdn.net/weixin_49043347/article/details/121794524