html实现简单的计算器(+-*/)

最新推荐文章于 2023-11-21 15:20:56 发布

王文达

最新推荐文章于 2023-11-21 15:20:56 发布

阅读量2k

点赞数 2

分类专栏： html jq

本文链接：https://blog.csdn.net/weixin_43767629/article/details/88562236

版权

jq 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

0 篇文章 0 订阅

订阅专栏

使用递归和indexof来实现对加减乘除的计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		        
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/glyphicons.css" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/popper.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script> 
		<style type="text/css">
			table{
				border-collapse: collapse;
				width: 300px;
				height: 200px;
			}
			
			table,td,tr{
				border: 1px solid gray;
				text-align: center;
			}
			
			button{
				border: 0px;
				font-size: 20px;
				background-color: white;
				width: 100%;
				height: 100%;
			}
			
			.plusone{
				color: coral;
				background-color: rgb(249,249,249);
			}	
		</style>
		
		<script type="text/javascript">
			$(function(){
				var str="";
				$("button").click(function(){
					var btn = event.target;
					var num = $(btn).text();
					str +=num
					$("#val").val(str)
				})
				
				$("#cacu").click(function(){
					var str1 = str.replace("=","");
					var str2 =  caculate(str1)
					$("#val").val(str+str2);
				})
				
				function caculate(str){
					var index = str.indexOf("+");
					if(index != -1){
						return caculate(str.substring(0,index))+caculate(str.substring(index+1));
					}
					var index = str.indexOf("-");
					if(index != -1){
						return caculate(str.substring(0,index))-caculate(str.substring(index+1));
					}
					
					var index = str.indexOf("*");
					if(index != -1){
						return caculate(str.substring(0,index))*caculate(str.substring(index+1));
					}
					
					var index = str.indexOf("/");
					if(index != -1){
						return caculate(str.substring(0,index))/caculate(str.substring(index+1));
					}
					return parseFloat(str)
					
				}
				
			})
		</script>
		
	</head>
	<body>
		<div class="container" style="margin: 0px auto;border: 1px;" id="container">
			<div align="center" >
						<form action="countercheck.jsp" method="post" >
							<input type="text" name="num" value="" style="width: 300px;height: 60px;" id="val"/>
						<table>
							<tr>
								<td><button type="button"  class="plusone">+</button> </td>
								<td><button type="button"  class="plusone">/</button> </td>
								<td><button type="button"  class="plusone">*</button></td>
								<td><button type="button"  class="plusone">-</button></td>
							</tr>
							<tr>
								<td><button type="button">7</button></td>
								<td><button type="button">8</button></td>
								<td><button type="button">9</button></td>
								<td ><button type="button"   class="plusone">(</button> </td>
							</tr>
							<tr>
								<td><button type="button"  >4</button></td>
								<td><button type="button"  >5</button></td>
								<td><button type="button"  >6</button></td>
								<td><button type="button"   class="plusone">)</button></td>
							</tr>
							<tr>
								<td><button type="button"  >1</button></td>
								<td><button type="button"  >2</button></td>
								<td><button type="button"  >3</button></td>
								<td><button type="button"  class="plusone">.</button></td>
							</tr>
							<tr>
								<td colspan="2"><button type="button"   >0</button></td>
								<td colspan="2"><button type="submit"  class="plusone" id="cacu">=</button></td>
								<!--<td></td>
								<td></td>-->
							</tr>
						</table>
						<!--<input type="submit" value=""/>-->
					</form>
			</div>
		</div>
	</body>
</html>

计算器计算部分代码,使用了这位大大的代码,很简洁但是也有纰漏,如果想看详细计算代码,请参考https://blog.csdn.net/u011692041/article/details/49796343#commentBox

王文达

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html实现简单的计算器(+-*/)

使用递归和indexof来实现对加减乘除的计算&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content=&quo
复制链接

扫一扫