使用html+css+js完成简单的计算器

使用html+css+js完成简单的计算器

刚刚接触了js，就寻思做个计算器好了，简易计算器就这么诞生了，新手小白有很多地方不是特别会，去网上查查改改，总算是做出来了，话不多说，直接上代码：
首先是html：

<div class="big">
	<div class="computer">
	<input type="text" class="show" value="0" disabled="false"/>
		<ul>
			<li><input type="button" value="AC" class="but"></li>
			<li><input type="button" value="/" class="but"></li>
			<li><input type="button" value="*" class="but"></li>
			<li><input type="button" value="DEL" class="but"></li>
			<li><input type="button" value="1" class="but"></li>
			<li><input type="button" value="2" class="but"></li>
			<li><input type="button" value="3" class="but"></li>
			<li><input type="button" value="+" class="but"></li>
			<li><input type="button" value="4" class="but"></li>
			<li><input type="button" value="5" class="but"></li>
			<li><input type="button" value="6" class="but"></li>
			<li><input type="button" value="-" class="but"></li>
			<li><input type="button" value="7" class="but"></li>
			<li><input type="button" value="8" class="but"></li>
			<li><input type="button" value="9" class="but"></li>
			<li><input type="button" value="." class="but"></li>
			<li><input type="button" value="(" class="but"></li>
			<li><input type="button" value="0" class="but"></li>
			<li><input type="button" value=")" class="but"></li>
			<li><input type="button" value="=" class="but"></li>
		</ul>
	</div>
</div>

我是使用ul列表来完成模块构造的，在网上也有看到大神用table表格来完成
html没什么好说的，无非就是大框套小框，小框套列表

下面是css：

<style>
	.big{width: 300px;height: 483px;border: 2px solid black;margin: 0 auto;background-color: #EEEEEE;}
	.computer{width: 285px;height: 470p;border: 1px solid black;margin: 0 auto;margin-top: 7.5px;}
	.show{width: 285px;height: 80px;border: none;text-align: right;background-color: #D3D3D3;
			font-size: 20px;margin-bottom: 20px;padding: 0;border-bottom: 2px solid black;}
	.computer>ul{margin: 0;padding: 0;width: 100%;height: 365px;font-size: 20px;}
	.computer>ul>li{width: 50px;height: 50px;border:none;float: left;margin: 10px;
			color: #000000;list-style: none;text-align: center;line-height: 50px;}
	.computer>ul>li>input{width: 50px;height: 50px;}
</style>

这里设置了一些模块的样式，根据个人喜好来吧我觉得，也没什么重要的

最最核心的来啦，javascript：

<script type="text/javascript">
		window.onload=function(){
		// 用getElementsByClassName()方法获得所有指定类名的元素
		var var_number=document.getElementsByClassName("but");
		var var_screen=document.getElementsByClassName("show")[0];
		// 循环 i<=var_number.length-1
		for(var i=0;i<var_number.length;i++){
			var_number[i].onclick=function()
			{
				// 按下清空按钮
				if(this.value=="AC"){
					var_screen.value="";
				}
				// 按下删除键按钮
				else if(this.value=="DEL"){
					if(var_screen.value==""){
						var_screen.value="";
					}
					else{
					// substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
						var_screen.value=var_screen.value.substr(0,var_screen.value.length-1);
					}
				}
				// 按下等于
				else if(this.value=="="){
					var_screen.value=eval(var_screen.value);
				}
				// 按下小数点按钮
				else if(this.value=="."){
					if(var_screen.value==""){
						var_screen.value="0.";
					}
					else{
						var_screen.value=var_screen.value+".";
					}
				}
				// 按下左括号
				else if(this.value=="("){
					var_screen.value=var_screen.value+"(";
				}
				// 按下右括号
				else if(this.value==")"){
					var_screen.value=var_screen.value+")";
				}
				// 按下加号按钮
				else if(this.value=="+"){
					// 如果此时屏幕为空
					if(var_screen.value==""){
						var_screen.value="";
					}
					else{
						var_screen.value=var_screen.value+"+";
					}
				}
				// 按下减号按钮
				else if(this.value=="-"){
					// 如果此时屏幕为空
					if(var_screen.value==""){
						var_screen.value="";
					}
					else{
						var_screen.value=var_screen.value+"-";
					}
				}
				// 按下乘号按钮
				else if(this.value=="*"){
					// 如果此时屏幕为空
					if(var_screen.value==""){
						var_screen.value="";
					}
					else{
						var_screen.value=var_screen.value+"*";
					}
				}
				// 按下除号按钮
				else if(this.value=="/"){
					// 如果此时屏幕为空
					if(var_screen.value==""){
						var_screen.value="";
					}
					else{
						var_screen.value=var_screen.value+"/";
					}
				}
				else{
					var_screen.value+=this.value;
				}
			}
		}
	}
</script>

查了好多资料才勉勉强强写出来了，新手小白请多多指教【手动笔芯】
最后，上图！