计算器 3月29作业 - 每日作业

Home > List of blog posts > 计算器 3月29作业

Blogger Information

Blog 39

fans 0

comment 0

visits 34704

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>粟子</title>

	<style type="text/css">
		.box{
			width: 500px;
			height: 700px;
			background-color: #efefef;
			border: 1px solid lightgray;
			margin: 20px auto;
			text-align: center;
			color: #636363;
			box-shadow: 2px 2px 2px #999;
		}
		.box ul{
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		.box ul li{
			list-style-type: none;
			float: left;
			background-color: skyblue;
			margin-left: 20px;
		}
		.box ul li a{
			display: block;
			width: 100px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-decoration: none;
		}
		.box ul li a:hover{
			font-size: 1.2em;
			background-color: coral;
		}
		.box .pic{
			width: 450px;
			height: 400px;
			border: 1px solid lightgray;
			line-height: 1px;
			margin: auto;
			margin-top: 50px;
		}
		.box .pic img{
			width: 100%;
			height: 80%;
		}
	</style>
</head>
<body>
	
	<div class="box">
		<h2>明星相册</h2>
		<ul>
			<li>
				<a href="./images/star.png" title="one" onclick="change(this); return false;">小一</a>
			</li>
			<li>
				<a href="./images/star.png" title="two" onclick="change(this); return false;">小二</a>
			</li>
			<li>
				<a href="./images/star.png" title="three" onclick="change(this); return false;">小三</a>
			</li>
			<li>
				<a href="./images/star.png" title="four" onclick="change(this); return false;">小四</a>
			</li>
			
		</ul>
		
		
		<div class="pic">
			<img src="./images/star.png" alt="" id="img">
		</div>
		<p id="info"></p>
	</div>
	
	<script type="text/javascript">
		function change(info){
			//获取图片信息
			var picUrl = info.href;
			var picInfo = info.title;
			var picName = info.innerHTML;

			// 获取dom 对象
			var img = document.getElementById('img');
			var p = document.getElementById('info');

			//替换内容
			img.src= picUrl;
			p.innerHTML = "<span style='color: skyblue;'>"+picName +"</span>" + ':' + picInfo;
		}

		
	</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

计算计算器：

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器示例</title>
		
		<style>
                     
.clear{
	clear:both;
}

.box{
	/*width:250px;*/
	/*height:300px;*/
	
	margin:0 auto;
	display:inline-block;
	background-color:peru;
	
}
.show{
	width:100%;
	height:80px;
	border:none;
	outline:none;
	text-align:right;
	font-size:30px;
	
	background-color:darkcyan;
}
.first > input,
.second > input,
.third > input,
.fourth > input{
	/*width:55px;
	height:55px;*/
	width:75px;
	height:75px;
	display:inline-block;
	float:left;
	background-color:orange;
	
}
   
              </style>
	</head>
	<body>
		
		<div class="box">
			<form>
				
				<input type="text" name="show" value="" class="show" id="show" />
				
				<div class="numberArea">
					<div class="first" id="first">
						<input type="button" value="1" />
						<input type="button" value="2" />
						<input type="button" value="3" />
						<input type="button" value="BS" />
						<input type="button" value="AC" />
					</div>
					<div class="clear"></div>
					
					<div class="second" id="second">
						<input type="button" value="4" />
						<input type="button" value="5" />
						<input type="button" value="6" />
						<input type="button" value="+" />
						<input type="button" value="-" />
					</div>
					<div class="clear"></div>
					
					<div class="third" id="third">
						<input type="button" value="7" />
						<input type="button" value="8" />
						<input type="button" value="9" />
						<!--<input type="button" value="×" />
						<input type="button" value="÷" />-->
						
						<input type="button" value="*" />
						<input type="button" value="/"
					</div>
					<div class="clear"></div>
					
					<div class="fourth" id="fourth">
						<input type="button" value="0" />
						<input type="button" value="00" />
						<input type="button" value="." />
						<input type="button" value="=" />
						<input type="button" value="%" />
					</div>
					<div class="clear"></div>
				</div>
					
			</form>
		</div>
		<script>
                       var input=new Array(),//input输入框中只保持有一个数组还是字符串?
	inputValue="",//用来存放输入的值
	input_1="",
	input_2="",
	operation_1="",
	operation_2="",
	inputDom=document.getElementById('show');

//给按钮绑定事件
var first=document.getElementById('first'),
	firsts=first.getElementsByTagName('input');
	
var second=document.getElementById('second'),
	seconds=second.getElementsByTagName('input');
	
var third=document.getElementById('third'),
	thirds=third.getElementsByTagName('input');
	
var	fourth=document.getElementById('fourth'),
	fourths=fourth.getElementsByTagName('input');
	
var numberDom=[first.getElementsByTagName('input')[0],
				first.getElementsByTagName('input')[1],
				first.getElementsByTagName('input')[2],
				second.getElementsByTagName('input')[0],
				second.getElementsByTagName('input')[1],
				second.getElementsByTagName('input')[2],
				third.getElementsByTagName('input')[0],
				third.getElementsByTagName('input')[1],
				third.getElementsByTagName('input')[2],
				fourth.getElementsByTagName('input')[0],
				fourth.getElementsByTagName('input')[1],
				fourth.getElementsByTagName('input')[2]];
//for(var i=0;i<12;i++){
//	numberDom[i].onclick=function(){
//		inputDom.value+=this.value;
////		alert(inputDom.value);
//	}
//}

//给数字区绑定点击事件
for(var i=0;i<12;i++){
	numberDom[i].onclick=num;
		
}
//给运算符事件
for(var i=3;i<5;i++){

	seconds[i].onclick=operation;
	thirds[i].onclick=operation;
	fourths[i].onclick=operation;
		
	
}

//先写状态：分为：1、数字，2、运算符，3、退格，4、清零,5、等号

//状态1：
function num(){
//	alert(this.value+"bbbbbbb");
	//判断是否有运算符
	
	if(inputDom.value==""&&this.value==0){
		return;
	}
	if(operation_1!=""){
	//	没有运算符,再判断inputDom.value是否为零
	
		var lastChar=inputValue.charAt(inputValue.length-1);
		if(lastChar=="+"||lastChar=='-'||lastChar=="*"||lastChar=='/'||lastChar=='%'){
			inputDom.value=this.value;
			input_2=this.value;
			inputValue+=this.value;	
			
			console.log("有运算符后再次输入的值 inputValue："+inputValue);
		}else{
			inputDom.value+=this.value;
			input_2+=this.value;
			inputValue+=this.value;	
			
			console.log("input_2的值为：");
			console.log("有运算后的inputValue的值为："+inputValue);
			
		}
		

	}else{
		//operation_1的值为1,则输入的值应该拿给input_1
		
		inputDom.value+=this.value;
		input_1+=this.value;
		inputValue+=this.value;
	}
}

//状态2：
//当点击运算符时,分为两种:1、运算前面有两组数字，则计算结果，显示结果。
//						2、运算符前面只有一组数字，则不变。
//输入框中的默认值为0
function operation(){
	if(operation_1!=""){
		var lastChar=inputValue.charAt(inputValue.length-1);
		if(lastChar=='+'||lastChar=='-'||lastChar=='*'||lastChar=='/'||lastChar=='%'){
			//则替换该运算符
			inputValue=inputValue.slice(0,inputValue.length-1);
			inputValue+=this.value;
			operation_1=this.value;
			console.log("inputValue的值是："+inputValue);
		}else{
			//最后一个字符是数字，则做运算
//			inputDom.value=eval(input_1+operation_1+input_2);
			//计算结果
			var a=Number(input_1);
			var b=Number(input_2);
			
			console.log("计算结果：\na为："+a+"\nb为："+b+"\noperation_1为："+operation_1);
				if(operation_1=='+'){
					inputDom.value=a+b;
//					inputDom.value=eval(input_1+"+"+input_2);
					input_1=inputDom.value;
					operation_1=this.value;
					inputValue=inputDom.value+this.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='-'){
					inputDom.value=a-b;
//					inputDom.value=eval(input_1+"-"+input_2);
					input_1=inputDom.value;
					operation_1=this.value;
					inputValue=inputDom.value+this.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='*'){
					inputDom.value=a*b;
//					inputDom.value=eval(input_1+"*"+input_2);
					input_1=inputDom.value;
					operation_1=this.value;
					inputValue=inputDom.value+this.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='/'){
					inputDom.value=a/b;
//					inputDom.value=eval(input_1+"/"+input_2);
					input_1=inputDom.value;
					operation_1=this.value;
					inputValue=inputDom.value+this.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='%'){
					inputDom.value=a%b;
//					inputDom.value=eval(input_1+"%"+input_2);
					input_1=inputDom.value;
					operation_1=this.value;
					inputValue=inputDom.value+this.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}
		}
	}else{
		//operation_1没有值 
		console.log(operation_1+"没有值");
		operation_1=this.value;
		console.log(operation_1+'有值')
		inputValue+=this.value;
		console.log("inputValue的值是："+inputValue);
	}
	
}

//给等号绑定事件
fourths[3].onclick=function(){
	var a=Number(input_1);
	var b=Number(input_2);
	
			console.log("计算结果：\na为："+a+"\nb为："+b+"\noperation_1为："+operation_1);
				if(operation_1=='+'){
					inputDom.value=a+b;
//					inputDom.value=eval(input_1+"+"+input_2);
					input_1=inputDom.value;
					operation_1="";
					inputValue=inputDom.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='-'){
					inputDom.value=a-b;
//					inputDom.value=eval(input_1+"-"+input_2);
					input_1=inputDom.value;
					operation_1="";
					inputValue=inputDom.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='*'){
					inputDom.value=a*b;
//					inputDom.value=eval(input_1+"*"+input_2);
					input_1=inputDom.value;
					operation_1="";
					inputValue=inputDom.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='/'){
					inputDom.value=a/b;
//					inputDom.value=eval(input_1+"/"+input_2);
					input_1=inputDom.value;
					operation_1="";
					inputValue=inputDom.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}else if(operation_1=='%'){
					inputDom.value=a%b;
//					inputDom.value=eval(input_1+"%"+input_2);
					input_1=inputDom.value;
					operation_1="";
					inputValue=inputDom.value;
					
					console.log("计算结果后inputValue值为:"+inputValue);
				}
}
//给清0绑定事件
firsts[4].onclick=function(){
	inputDom.value="";
	input_1="";
	input_2="";
	inputValue="";
	operation_1="";
	operation_2="";
}
//给退格绑定事件
firsts[3].onclick=function(){
	if(operation_1!=""){
		var lastChar=inputValue.charAt(inputValue.length-1);
		if(lastChar=='+'||lastChar=='-'||lastChar=='*'||lastChar=='/'||lastChar=='%'){
			//则替换该运算符
			//在刚输入运算符后退格
			inputValue=inputValue.slice(0,inputValue.length-1);
			operation_1=""
			
			console.log("当刚输入运算符后按退格后：inputValue的值是："+inputValue);
		}else{
			//在输入第二个数据时退格
			inputDom.value=inputDom.value.slice(0,inputDom.value.length-1);
			inputValue=inputValue.slice(0,inputDom.length-1);
			input_2=input_2.slice(0,input_2.length-1);
		}
	}else{
		//在输入第一个数据时退格
		inputDom.value=inputDom.value.slice(0,inputDom.value.length-1);
		inputValue=inputValue.slice(0,inputDom.length-1);
		input_1=input_1.slice(0,input_1.length-1);
	}
}

               </script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

万有引力

2018-03-15 13:38:46