前端入门小白的第一个高级程序——计算器

效果图:
效果图1
效果图2
效果图3
下面奉上代码:

<!DOCTYPE html>
<html>
<head>
	<title>计算器</title>
	<style>
		button {
    
			float:left;
			margin:7.5px;
			height:90px;
			width:90px;
			background-color:springgreen;
			font-size:30pt;
		}
		body {
    
			background-color:skyblue;
			margin:0px;
			overflow-y:hidden;
		}
		p {
    
			display:none;
			font-size:12pt;
			height:40px;
			width:200px;
			margin:0px;
			border-bottom:1px solid black;
			background-color:gray;
			padding-top:20px;
		}
		select {
    
			font-size:20pt;
		}
		input[type = "color"] {
    
			float:right;
			margin-right:5px;
		}
		#mian {
    
			border:24px solid black;
			margin:0 auto;
			margin-top:40px;
			width:630.5px;
			height:648.5px;
			background-color:silver;
		}
		#boX {
    
			text-align:right;
			vertical-align:middle;
			background-color:silver;
			width:625px;
			height:100px;
			font-size:65pt;
		}
		.caidan {
    
			display:block;
			height:45px;
			width:200px;
			font-size:25pt;
			text-align:center;
			margin:0px;
			border-bottom:1px solid black;
			background-color:silver;
			padding-top:10px;
		}
		#shezhi {
    
			background-color:silver;
			float:left;
			width:200px;
			position: absolute;
			top:0px;
			bottom:0px;
			border-right:1px solid black;
		}
	</style>
	<script>
		//储存数据
		var One = 0;
		var Two = 0;
		//计算类型一
		var Three = 0;
		//计算类型二
		var Four = 0;
		//计算后输入新数据将覆盖旧数据
		var Five = true;
		//储存M
		var Six = 0;
		//数字函数
		function num(item) {
    
			var a = document.getElementById("boX").value;
			var z = a.length;
			if(z==24) {
    
				document.getElementById("boX").value = a;
			}
			else {
    
				if(a=="0" || Five==false) {
    
					document.getElementById("boX").value = item;
					Five = true;
				}
				else {
    
					var b = item;
					var c = a + b;
					document.getElementById("boX").value = c;
				}
			}
			Border();
			shanshuo();
		}
		//小数点函数
		function shudian() {
    
			var a = document.getElementById("boX").value;
			var b = a.indexOf(".");
			if(Five==false) {
    
				document.getElementById("boX").value = "0."
			}
			else {
    
				if(a=="" || b > 0) {
    
					alert("请输入正确数据!");
				}
				else {
    
					var c = ".";
					var d = a + c;
					document.getElementById("boX").value = d;
				}
			}
			Border();
		}
		//删除函数
		function shanchu() {
    
			var a = document.getElementById("boX").value;
			if(a=="Infinity" || Five==false) {
    
				document.getElementById("boX").value = 0;
			}
			else {
    
				var b = a.length;
				if(b=="1") {
    
					document.getElementById("boX").value = "0";
				}
				else {
    
					var c = a.length;
					var d = a.slice(0,b-1);
					document.getElementById("boX").value = d;
				}
				Border();
			}
		}
		//清零函数
		function qinlin() {
    
			document.getElementById("boX").value = "0";
			One = 0;
			Two = 0;
			Three = 0;
			Four = 0;
			Five = true;
			Border();
		}
		//运算函数
		function jia() {
    
			var a = document.getElementById("boX").value;
			if(Three!="jia" && One!="0" && a==One) {
    
				Three = "jia";
			}
			else {
    
				if(One==0) {
    
					One = document.getElementById("boX").value;
					Three = "jia";
					Five = false;
				}
				else {
    
					Two = document.getElementById("boX").value;
					Four = "jia";
					Five = false;
					yunsuan();
				}
			}
			Border()
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值