简单网页计算器代码大全_用web制作简单计算器简单辅助官网

注：本人为初学者，欢迎各位大神指教
在线试一试
简单计算器实现效果：

HTML代码counter.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<link rel="stylesheet" type="text/css" href="css/counter.css" />
		<script type="text/javascript" src="js/counter.js"></script>
	</head>

	<body>
		<div class="counter">
			<div class="counter_top" >
				<form>
					<input type="text" id="top" value="" />
				</form>
			</div>
			<div class="counter_down">

				<form>
					<input type="button" class="CE" value="清屏" onclick="clthis.value)" />
					<input type="button" class="CE" value="退格" onclick="clthis.value)"/>
					<div class="down_right" id="cou">
						<input type="button" class="cou" value="÷" onclick="evathis.value)"/>
						<input type="button" class="cou" value="×" onclick="evathis.value)"/>
						<input type="button" class="cou" value="-" onclick="evathis.value)"/>
						<input type="button" class="cou" value="+" onclick="evathis.value)"/>
						<input type="button" class="cou" value="=" onclick="evathis.value)"/>
					</div>
					<div id="down_num" >
						<input type="button" class="num" value="7" onclick="showthis.value)"/>
						<input type="button" class="num" value="8" onclick="showthis.value)"/>
						<input type="button" class="num" value="9" onclick="showthis.value)"/>
						<input type="button" class="num" value="4" onclick="showthis.value)" />
						<input type="button" class="num" value="5" onclick="showthis.value)" />
						<input type="button" class="num" value="6" onclick="showthis.value)"/>
						<input type="button" class="num" value="1" onclick="showthis.value)"/>
						<input type="button" class="num" value="2" onclick="showthis.value)"/>
						<input type="button" class="num" value="3" onclick="showthis.value)"/>
						<input type="button" class="num" value="0" onclick="showthis.value)"/>
						<input type="button" class="num" value="." onclick="showthis.value)"/>
						<input type="button" class="num" value="+/-" onclick="evathis.value)"/>
					</div>

				</form>

			</div>
		</div>
	</body>

</html>

CSS代码counter.css

.counter{
	background-color: #E0E0E0;
	width: 440px;
	height: 460px;
	padding: 20px;
}

.counter .counter_top{
	width: 440px;
	height: 53px;
	background-color: #fff;
}

.counter .counter_top input{
	width: 440px;
	height: 53px;
	border: 0px;
}

.counter_down .CE{
	width: 152.5px;
	height: 45px;
	margin: 15px 15px 0px 0px;
}

.counter_down .cou{
	width: 95px;
	height: 45px;
	margin-bottom: 15px;
}

.down_right{
	width: 95px;
	float: right;
	margin-top: 15px;
}

.counter_down .num{
	width: 95px;
	height: 45px;
	margin: 15px 16px 0px 0px;
}

js代码counter.js


var a=0;
var b;
var c = 0;

function showvalue) {	
	document.getElementById"top").value +=value;		
}

function evavalue){
	c=parseFloatdocument.getElementById"top").value);
	
	if value=="=") {
		ifb=="+"){
			document.getElementById"top").value=a+c);
		}else ifb=="-"){
			document.getElementById"top").value=a-c);
		}else ifb=="×"){
			document.getElementById"top").value=a*c);
		}else ifb=="÷"){
			ifc==0){
				document.getElementById"top").value="分母不能为0";
			}else{
				document.getElementById"top").value=a/c);
			}	
		}
	}else{
		a=parseFloatdocument.getElementById"top").value);
		document.getElementById"top").value="";
		b=value;
		ifb=="+/-"){
			a=-a;
			document.getElementById"top").value=a;
		}
	}	
}

function clvalue){
	ifvalue=="清屏"){
		document.getElementById"top").value="";
	}else{		document.getElementById"top").value=document.getElementById"top").value.substring0,document.getElementById"top").value.length-1))
	}	
}

Published by

风君子

独自遨游何稽首揭天掀地慰生平 View all posts by 风君子

发表回复取消回复