js 计算器


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>计算器title>
		
	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">1div>
			<div class="jian">2div>
			<div class="jian">3div>
			<div class="jian">4div>
			<div class="jian">5div>
			<div class="jian">6div>
			<div class="jian">7div>
			<div class="jian">8div>
			<div class="jian">9div>
			<div class="jian">0div>
			<div class="jian">00div>
			<div class="jian">.div>
		div>
		<div style="width: 150px;float: left">
			<div id="tui" class="jian">>div>
			<div id="qing" class="jian">cediv>
			<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>

你可能感兴趣的:(小例子)