js 计算器_js 计算器公式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42249565/article/details/86599712
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>计算器</title>
		<!-- 有事，有项目联系我，QQ，821642832 -->
	</head>
	<body>
		<style type="text/css">
			body{
				width: 600px;
				margin: 80px auto 0 auto;
			}
			#xian{
				width: 580px;
				border: 1px solid #f2f2f2;
				height: 70px;
				background: #f2f2f2;
				border-radius: 5px;
				text-align: right;
				font: 35px/2 "bodoni mt black";
				padding: 0 8px;
			}
			.jian{
				width: 145px;
				background: #f2f2f2;
				display: inline-block;
				height: 45px;
				margin: 5px 0;
				font: 600 20px/45px "courier new";
				text-align: center;
				cursor: pointer;
			}
			.jian:hover{
				background: #e2e2e2;
			}
			.jian:active{
				background: #d2d2d2;
			}
		</style>
		<div id="xian"></div>
		<div class="jian yun">+</div>
		<div class="jian yun">-</div>
		<div class="jian yun">*</div>
		<div class="jian yun">/</div>
		<div id="shuzi" style="width: 450px;float: left;">
			<div class="jian">1</div>
			<div class="jian">2</div>
			<div class="jian">3</div>
			<div class="jian">4</div>
			<div class="jian">5</div>
			<div class="jian">6</div>
			<div class="jian">7</div>
			<div class="jian">8</div>
			<div class="jian">9</div>
			<div class="jian">0</div>
			<div class="jian">00</div>
			<div class="jian">.</div>
		</div>
		<div style="width: 150px;float: left">
			<div id="tui" class="jian">></div>
			<div id="qing" class="jian">ce</div>
			<div id="deng" class="jian" style="height: 100px;line-height: 100px;">=</div>
		</div>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
			var lishi='';
			var zong='';
			var yun='';
			var clear=false;
			$('#shuzi div').click(function(){
				if(clear){
					$('#xian').text('');
					clear=false;
				}
				window.zong=$('#xian').text();
				var dian=$(this).text();
				if(dian=='.' && window.zong.indexOf('.') != -1){
					return false;
				}
				window.zong = String(window.zong) + dian;
				$('#xian').text(window.zong);
			});
			$('.yun').click(function(){
				if(lishi=='' && yun == ''){
					window.linshi=$('#xian').text();
					yun=$(this).text();
				}else{
					switch(yun){
						case '+':
						  window.linshi=Number(linshi) + Number($('#xian').text());
						  yun=$(this).text();
						  $('#xian').text(Number(window.linshi));
						  break;
						case '-':
						  window.linshi=Number(linshi)-Number($('#xian').text());
						  yun=$(this).text();
						   $('#xian').text(Number(window.linshi));
						  break;
						case '*':
						  window.linshi=Number(linshi)*Number($('#xian').text());
						  yun=$(this).text();
						   $('#xian').text(Number(window.linshi));
						  break;
						case '/':
						  window.linshi=Number(linshi)/Number($('#xian').text());
						  yun=$(this).text();
						   $('#xian').text(Number(window.linshi));
						  break;
					}
				}
				clear=true;
			});
			$('#deng').click(function(){
				switch(yun){
					case '+':
					  window.linshi=Number(linshi) + Number($('#xian').text());
					  yun=$(this).text();
					  $('#xian').text(Number(window.linshi));
					  break;
					case '-':
					  window.linshi=Number(linshi)-Number($('#xian').text());
					  yun=$(this).text();
					   $('#xian').text(Number(window.linshi));
					  break;
					case '*':
					  window.linshi=Number(linshi)*Number($('#xian').text());
					  yun=$(this).text();
					   $('#xian').text(Number(window.linshi));
					  break;
					case '/':
					  window.linshi=Number(linshi)/Number($('#xian').text());
					  yun=$(this).text();
					   $('#xian').text(Number(window.linshi));
					  break;
				}
			});
			$('#qing').click(function(){
				window.linshi='';
				yun='';
				$('#xian').text('');
			});
			$('#tui').click(function(){
				var s=String(window.zong);
				s=s.substring(0,s.length-1);
				$('#xian').text(s);
				window.zong=s;
			});
			
			
		</script>	
	</body>
</html>