简单的Web版计算器

最新推荐文章于 2022-12-16 08:42:52 发布

chuogou6290

最新推荐文章于 2022-12-16 08:42:52 发布

阅读量474

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/defore/blog/299070

版权

先完成html部分的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Calculator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="workship">
<table>
<!--标题-->
<thead>
<tr border-bottom="1px soild">
<th style="text-align:left; width:200px;">My Calculator</th>
<td>
<img  src="img/min.png" alt="最小化">  
                        <img  src="img/max.png" alt="最大化">  
                        <img  src="img/close.png" alt="关闭">
</td>
</tr>
</thead>

<tbody>
<!--输入栏,分两行，一行输入，一行输出-->
<tr>
<td colspan="2">
<div style="border:1px solid; padding:5px;">
<div id="input"></div>
<div id="output">0</div>
</div>
</td>
</tr>
<!--按钮-->
<tr>
<td colspan="2">
<table width="100%" height="300px">
<tr>
<td>
<table width="100%">
<!--数字键-->
<tr id="bottom">
<td>
<table>
<tr>
<td><button name="num">7</button></td>
<td><button name="num">8</button></td>
<td><button name="num">9</button></td>
</tr>
<tr>
<td><button name="num">4</button></td>
<td><button name="num">5</button></td>
<td><button name="num">6</button></td>
</tr>
<tr>
<td><button name="num">1</button></td>
<td><button name="num">2</button></td>
<td><button name="num">3</button></td>
</tr>
</table>
</td>
</tr>
<!--0和小数点-->
<tr>
<td>
<button name="num" id="zero">0</button>
<button name="num">.</button>
</td>
</tr>
</table>
</td>
<!--功能键-->
<td>
<table>
<tr>
<td><button name="op">/</button></td>
<td><button id="clear" onclick="clearZero()">清零</button></td>
</tr>
<tr>
<td><button name="op">*</button></td>
<td><button id="delete" onclick="deleted()">退格</button></td>
</tr>
<tr>
<td><button name="op">-</button></td>
<td rowspan="2"><button id="equal" onclick="equal()">=</button></td>
</tr>
<tr>
<td><button id="add" name="op">+</button></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/js.js"></script>
</body>
</html>

完成之后有这样的效果：

然后是用css来渲染：

#workship {
	margin: 20px;
	width: 360px;
	height: 400px;
	border: 2px solid black;
	border-radius: 10px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(164, 0, 255)), color-stop(1, rgb(84, 1, 255)));
	background-image: -moz-linear-gradient(top, rgb(164, 0, 255), rgb(84, 1, 255));
}
.img {
	margin-left: -5px;
	margin-top: -3px;
	width: 20%;  
}
#output {
	font-size: 20pt;
	font-weight: bold;
	text-align: right;
}
#input {
	height: 20px;
	text-align: right;
	margin-bottom: 8px;
}
.button {
	width: 50px;
	height: 50px;
	font-size: 35px;
	margin: 3px;
	border-radius: 5px;
}
#zero {
	width: 110px;
	height: 50px;
	font-size: 35px;
	margin-left: 5px;
	border-radius: 5px;   
}
#equal {
	width: 50px;
	height: 110px;
	font-size: 35px;
	margin: 3px;
	border-radius: 5px;
}
.button:hover, #zero:hover, #equal:hover {
	background: rgb(127, 127, 127);
}
#clear,#delete {
	font-size: 18px;
	font-weight: bold;
}

效果：

ps:上面三个纯图片。。。

最后是js部分的代码：

//用JQuery实现
var nums = document.getElementsByName('num');//按钮
var shus = new Array();//输入的数值
var fhs = new Array();//功能键
var flag = false;//
var i = 0;
var result = 0;
$.each(nums,function () {
	var nu = $(this);
	nu.click(function(){
		if($("#output").html().length>=20) {
			return;
		}
		if (flag) {
			$("#output").html(nu.html());
			flag = false;//用于第二次输入
			return;
		}
		if ($("#output").html()=="0") {
			if (nu.html()===".") {
				$("#output").html("0.");
			} else {
				$("#output").html(nu.html());
			}
		} else {
			$("#output").html($("#output").html()+nu.html());
		}
	});
}); 

var op = document.getElementsByName("op");
$.each(op,function() {
	var fh = $(this);
	fh.click(function(){
		flag = true;
		var input = $("#input").html();
		var output = $("#output").html();
		$("#input").html(input+output+fh.html());
		shus[i] = parseFloat(output);
		fhs[i] = fh.html();
		if (shus.length == 1) {
			result = shus[0];
			i++;
			return;
		}

		switch(fhs[i-1]) {
			case "+" :
				result = result + shus[i];
				break;
			case "-" :
				result = result - shus[i];
				break;
			case "*" :
				result = result * shus[i];
				break;
			case "/" :
				if (shus[i] === 0) {
					$("#output").html("false");
					return;
				}
				result = result / shus[i]
				break;
			default:
				break;
		}
		i++;
		$("#output").html(result);
	});
});

function equal () { //等于函数
	document.getElementById("add").click();
	$("#input").html("");
	result = 0;
	i = 0;
	shus = [];
	fhs = [];
}

function clearZero () {//清零函数
	$("#output").html(0);
	$("#input").html("");
	result = 0;
	i = 0;
	shus = [];
	fhs = [];
}

function deleted () {//退格函数
	if ($("#output").html().length <= 1) {
		$("#output").html(0);
	} else {
		$("#output").html($("#output").html().substring(0,$("#output").html().length-1));
	}
}	

总结：1.使用JQuery是比较方便，一些类似each（）的遍历函数比较使用。
     2.还没实现响应式或者一些比较复杂的效果。
     3.还没实现键盘输入。

转载于:https://my.oschina.net/defore/blog/299070

chuogou6290

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的Web版计算器

先完成html部分的代码： <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>MyCalculator</title><linkrel="...
复制链接

扫一扫