简易计算器(jquery)

首先对于依赖于jquery的网页来说首先创建html后一定要先引入jquery插件

body {
				margin: 0px auto;
				padding: 0px;
				border: 1px solid #000;
				width: 500px;
				height: 600px;
			}
			#show {
				height: 175px;
				background: #d3d3d3;
			}
			#control {
				height: 425px;
				background: #bebebe;
			}
			#control div {
				height: 83px;
				width: 500px;
			}
			#control div div {
				margin: 2px 2px;
				float: left;
				height: 81px;
				width: 121px;
				background: #d3d3d3;
			}
			#control div #a0,
			#control div #a1,
			#control div #a2,
			#control div #a3,
			#control div #a4,
			#control div #a5,
			#control div #a6,
			#control div #a7,
			#control div #a8,
			#control div #a9 {
				background: #f5f5f5;
			}
			#container #control div div:hover {
				background: #848484;
				cursor: pointer;
			}
			#f-show {
				margin-right: 5px;
				margin-top: 70px;
				float: right;
				width: 300px;
				height: 50px;
				text-align: right;
			}
			#z-show {
				margin-right: 5px;
				float: right;
				width: 300px;
				height: 50px;
				clear: both;
				text-align: right;
				font-size: 30px;
			}
			p {
				text-align: center;
				padding-top: 15px;
			}

接下来是html 也就是body部分

<div id="container">
			<div id="show">
				<div id="f-show">1</div>
				<div id="z-show">0</div>
			</div>
			<div id="control">
				<div id="set1">
					<div id="CE">
						<p>CE</p>
					</div>
					<div id="C">
						<p>C</p>
					</div>
					<div id="larr">
						<p>⇐</p>
					</div>
					<div id="division">
						<p>÷</p>
					</div>
				</div>
				<div id="set2">
					<div id="a7">
						<p>7</p>
					</div>
					<div id="a8">
						<p>8</p>
					</div>
					<div id="a9">
						<p>9</p>
					</div>
					<div id="mul">
						<p>×</p>
					</div>
				</div>
				<div id="set3">
					<div id="a4">
						<p>4</p>
					</div>
					<div id="a5">
						<p>5</p>
					</div>
					<div id="a6">
						<p>6</p>
					</div>
					<div id="sub">
						<p>-</p>
					</div>
				</div>
				<div id="set4">
					<div id="a1">
						<p>1</p>
					</div>
					<div id="a2">
						<p>2</p>
					</div>
					<div id="a3">
						<p>3</p>
					</div>
					<div id="add">
						<p>+</p>
					</div>
				</div>
				<div id="set5">
					<div id="plu">
						<p>±</p>
					</div>
					<div id="a0">
						<p>0</p>
					</div>
					<div id="del">
						<p>.</p>
					</div>
					<div id="equal">
						<p>=</p>
					</div>
				</div>
			</div>
		</div>

接下来是js代码

var z_number = 0;
			var f_number = ""; //用于控制第二栏显示数据     为string类型;
			var zancun_number = 0;
			var jx = 1;
			var dy = 0;

			window.onload = function () {
				collect(); //用于绑定 数字  输入 事件;
				collect_2(); //用于绑定  运算符  输入 事件
				show(); //初始化显示区域
			};

			function show() {
				//用于控制显示部分, 每次有数值变化时 调用此函数可实现数据刷新显示;

				var zShow = document.getElementById("z-show");
				zShow.innerHTML = z_number;
				var fShow = document.getElementById("f-show");
				if (f_number == "") {
					fShow.innerHTML = "";
				} else {
					fShow.innerHTML = f_number;
				}
			}

			//输入数字的事件函数
			function collect() {
				for (var i = 0; i <= 9; i++) {
					//获取0-9的输入
					document.getElementById("a" + i).onclick = function () {
						if (dy == 1) {
							dy = 0;
							clear();
						}
						//	alert(z_number.toString().length);
						if (z_number.toString().length < 16) {
							if (parseInt(z_number) === z_number && z_number % 1 === 0) {
								z_number = z_number * 10 + parseInt(this.innerText);
							} else {
								z_number = "" + z_number;
								z_number += parseInt(this.innerText);
							}
						}
						show(); //刷新显示部分
						jx = 0;
					};
				}
			}
			//运算符输入的函数
			function collect_2() {
				document.getElementById("add").onclick = function () {
					//加法
					dy = 0;
					if (jx == 0) {
						//用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
						jx = 1;
						f_number = f_number + z_number + "+";
						z_number = eval(f_number + "0");
						zancun_number = z_number;
						show();
						z_number = 0;
					}
				};
				document.getElementById("sub").onclick = function () {
					//减法
					dy = 0;
					//alert("add");
					if (jx == 0) {
						//用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
						jx = 1;
						f_number = f_number + z_number + "-";
						z_number = eval(f_number + "0");
						zancun_number = z_number;
						show();
						z_number = 0;
					}
				};
				document.getElementById("mul").onclick = function () {
					//乘法
					dy = 0;
					//alert("add");
					if (jx == 0) {
						//用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
						jx = 1;
						f_number = f_number + z_number + "*";
						z_number = eval(f_number + "0");
						zancun_number = z_number;
						show();
						z_number = 0;
					}
				};
				document.getElementById("division").onclick = function () {
					//除法
					dy = 0;
					//alert("add");
					if (jx == 0) {
						//用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
						jx = 1;
						f_number = f_number + z_number + "/";
						var z = z_number; //	仅在下边if处使用
						z_number = eval(f_number + "0");
						zancun_number = z_number;
						if (z_number == "Infinity") {
							//用于解决 9/此时显示Infinity 的问题
							z_number = z;
						}
						show();
						z_number = 0;
					}
				};
				document.getElementById("equal").onclick = function () {
					//等于
					//alert("add");
					if (jx == 0) {
						z_number = eval(f_number + z_number); //这里解决最后一次加什么值的问题 因为如果最后一次按下加减乘除不输入数字的话
					} else {
						//z_number 被赋值为零了
						z_number = eval(f_number + zancun_number);
					}
					f_number = "";
					show();
					dy = 1;
					//clear();
				};

				document.getElementById("C").onclick = function () {
					//归零
					clear();
					show();
				};

				document.getElementById("CE").onclick = function () {
					//归零当前
					z_number = 0;
					show();
				};
				document.getElementById("plu").onclick = function () {
					//± 取负
					z_number *= -1;
					show();
					dy = 0;
				};
				document.getElementById("larr").onclick = function () {
					//退格
					//	alert(''+z_number);
					z_number = "" + z_number;
					z_number = z_number.slice(0, -1);
					//alert(z_number);
					z_number = Number(z_number);
					//alert(typeof parseFloat(z_number));
					//alert(typeof z_number);
					show();
					dy = 0;
				};
				var del = (document.getElementById("del").onclick = function () {
					//点
					if (Math.floor(z_number) === z_number) {
						z_number += ".";
					}
					show();
				
				});
			}

			//清零函数!
			function clear() {
				//将所有全局变量初始化
				z_number = 0;
				f_number = "";
				zancun_number = 0;
				jx = 1;
			}

THE END
分享
二维码
< <上一篇
下一篇>>