js计算器

最新推荐文章于 2024-09-14 17:04:32 发布

不爱喝水的杯子呐

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量74

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_45982114/article/details/120640189

版权

<div id="calculator">	
		<input type="text" id="calculator-display" value="" placeholder="0"/>	
		<div id="calculator-keys">
			<button type="button" value="AC">AC</button>
			<button type="button" value="±">±</button>
			<button type="button" value="%">%</button>
			<button type="button" value="/">/</button>
			
			<button type="button" value="7">7</button>
			<button type="button" value="8">8</button>
			<button type="button" value="9">9</button>
			<button type="button" value="*">*</button>
			
			<button type="button" value="4">4</button>
			<button type="button" value="5">5</button>
			<button type="button" value="6">6</button>
			<button type="button" value="-">-</button>
			
			<button type="button" value="1">1</button>
			<button type="button" value="2">2</button>
			<button type="button" value="3">3</button>
			<button type="button" value="+">+</button>
			
			<button type="button" id="item"  value="0">0</button>
			<button type="button" value=".">.</button>
			<button type="button" value="=" id="equlis">=</button>
		</div>
		</div>

$(function(){
				var $show=$("#calculator-display");//获取数据显示框
				var $flog=false;//定义一个变量来进行二次运算
				$("button[value!='=']").click(function(){	//获取所有button，button[value!='=']属性选择器过滤=按钮
				if($flog){
					$show.val("");
					$flog=false;
					}
					$show.val(($show.val()+$(this).val()));//显示框拼接
				});
				$("#equlis").click(function(){//等于按钮绑定事件
					$show.val(eval($show.val()));//eval（）进行里面参数的运算
					$flog=true;
				});
				$("button[value=AC]").click(function(){//AC按钮绑定清空事件
					$show.val("");
					$flog=false;
				});
			});


			*{
				margin:0px;
				padding:0px;
				font-size:20px;	
			}
			div{
				margin:0 auto;
			}
			#calculator-keys{
				display: grid;
				grid-template-columns: 50px 50px 50px 50px;
				grid-template-rows:50px 50px 50px 50px 50px;
				grid-gap:20px;
				width: 260px;
			}
			#calculator-keys button{
				outline:0;
				border-radius: 50px;
				background-color: #D3E0E8;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.2); 
			}
			#item{	
				  grid-column-start:1;
				  grid-column-end:3;  
			}
			#calculator-display{
				font-size: 25px;
				text-align: right;
				border-radius: 20px;
				width:270px;
				height: 50px;
				margin: 20px 0px;
			}
			#calculator{
				background-color: #DCF3F3;
				border-radius: 25px;
				text-align: center;
				width: 300px;
				height: 450px;
			}