前端计算器

最新推荐文章于 2024-05-25 09:11:53 发布

北辰星梦

最新推荐文章于 2024-05-25 09:11:53 发布

阅读量579

点赞数

文章标签：前端 javascript elementui html

本文链接：https://blog.csdn.net/weixin_44147170/article/details/122566528

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DEMO</title>
		<style type="text/css">
			#num input{
				width: 30px;
				height: 30px;
				margin: 12px 12px;
				border-radius: 5px;
				text-align: center;
				font-weight: 600px;
			}
			#re{
				margin: 0 auto;
				width: 100px;
			}
		</style>
		<script type="text/javascript">
			function getNumber(valueStr){
				document.getElementById('OUT').value+=valueStr;
			}
			function outcome(){
				var result=eval(document.getElementById('OUT').value);
				document.getElementById('OUT').value=result;
			}
			
			function cl(){
				var a="";
				document.getElementById('OUT').value=a;
			}
		</script>
	</head>
	<body>
		<div id="ground" style="margin: 0 auto;width: 170px;">
		<div id="" style="margin: 0 auto;width: 150px;">
			<input type="text" name="" id="OUT" value="" onfocus="blur()"/>
		</div>
		<div id="num">
			<input type="button" value="1" onclick="getNumber(this.value)"/>
			<input type="button" value="2" onclick="getNumber(this.value)"/>
			<input type="button" value="3" onclick="getNumber(this.value)"/>
			<input type="button" value="4" onclick="getNumber(this.value)"/>
			<input type="button" value="5" onclick="getNumber(this.value)"/>
			<input type="button" value="6" onclick="getNumber(this.value)"/>
			<input type="button" value="7" onclick="getNumber(this.value)"/>
			<input type="button" value="8" onclick="getNumber(this.value)"/>
			<input type="button" value="9" onclick="getNumber(this.value)"/>
			<input type="button" value="0" onclick="getNumber(this.value)"/>
			<input type="button" value="+" onclick="getNumber(this.value)"/>
			<input type="button" value="-" onclick="getNumber(this.value)"/>
			<input type="button" value="*" onclick="getNumber(this.value)"/>
			<input type="button" value="/" onclick="getNumber(this.value)"/>
			<input type="button" value="%" onclick="getNumber(this.value)"/>
		</div>
		<div id="re">
			<input type="button" name="" id="" value="清除" onclick="cl()"/>
			<input type="button" name="" id="" value="计算" onclick="outcome()" />
		</div>
		</div>
	</body>
</html>

北辰星梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端计算器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>DEMO</title> <style type="text/css"> #num input{ width: 30px; height: 30px; margin: 12px 12px; border-radius: 5px; text-ali.
复制链接

扫一扫