纯js + 正则表达式编写简单计算器

最新推荐文章于 2024-01-23 16:40:43 发布

一身正气z

最新推荐文章于 2024-01-23 16:40:43 发布

阅读量623

点赞数

本文链接：https://blog.csdn.net/wudingan/article/details/99637135

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			#container{
				width:152px;
				height: 220px;
				margin: 30px auto;
				padding: 15px 20px;
				background-color: skyblue;
			}
			.calc-header{
				width: 150px;
				float: left;
				border: 1px solid #f5f0f0;
			}
			.calc-show{
				float: left;
				margin-top: 10px;
			}
			.calc-show input{
				height: 25px;
				border: 1px solid #f5f0f0;
			}
			.calc-btn{
				float: left;
				width:149px;
				text-align: center;
				margin-top: 10px;
				border: 1px solid #f5f0f0;
			}
			.calc-btn ul{
				float: left;
				list-style: none;
			}
			.calc-btn li{
				float: left;
				width:28px;
				margin-left: 6px;
				margin-top: 5px;
				border: 1px solid #f5f0f0;
			}
			.calc-btn li:last-child{
				margin-bottom: 5px;
			}
			.calc-btn li:hover{
				background-color: #f7f5f5;
				cursor: pointer;
			}
			.calc-footer{
				float: left;
				margin-top:15px;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!--计算机头部-->
			<div class="calc-header">
				<h4>计算器 vs 1.0</h4>
			</div>
			<!--显示部分-->
			<div class="calc-show">
				<input id="num" type="text" value="" readonly="readonly"/>
			</div>
			<div class="calc-btn">
				<ul>
					<li onclick="btn(this);">0</li>
					<li onclick="clear_num();">C</li>
					<li onclick="btn(this);">+</li>
					<li onclick="btn(this);">-</li>
					<li onclick="btn(this);">1</li>
					<li onclick="btn(this);">2</li>
					<li onclick="btn(this);">3</li>
					<li onclick="btn(this);">*</li>
					<li onclick="btn(this);">4</li>
					<li onclick="btn(this);">5</li>
					<li onclick="btn(this);">6</li>
					<li onclick="btn(this);">/</li>
					<li onclick="btn(this);">7</li>
					<li onclick="btn(this);">8</li>
					<li onclick="btn(this);">9</li>
					<li onclick="calc();">=</li>
				</ul>
			</div>
			<div class="calc-footer">
				欢迎使用javascript计算器
			</div>
		</div>
		<script type="text/javascript">
			var temp="";
			function btn(t){
				temp+=t.innerHTML;
				document.getElementById("num").value=temp;
			}
			function calc(){
				var reg =/^[1-9]{1}\d*[\+\-\*\/]{1}[1-9]{1}\d{0,}$/;
				if(reg.test(temp)){
					temp=eval(temp);
					document.getElementById("num").value=temp;
					temp="";
				}else{
					alert("请先输入数字...");
					document.getElementById("num").value="";
					temp="";
				}
			}
			function clear_num(){
				document.getElementById("num").value="";
				temp="";
			}
			
		</script>
	</body>

</html>

一身正气z

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯js + 正则表达式编写简单计算器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0px; margin: 0px; } #container{ width:...
复制链接

扫一扫