用JavaScript写iPhone计算器
用JS写一计算器作为练习，基本实现iPhone计算器的功能和逻辑，分享一下设计过程：
- 1. 设计核心界面
- 2. 静态动态效果
- 3. 完成运算逻辑
完成后计算机能实现：
- 完成加减乘除取余等基本运算
- 直接输入“=”对运算结果重复上一步运算操作
- 被除数为“0”弹出警告窗口
- 连续运算
- ……
1. 设计核心界面
参考iPhone，先把最初的结构搭好：
我用了table来排版，便于调整：
<table bgcolor="black" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<input type="text" value="0" id="screen"/>
td>
tr>
<tr>
<td>
<input type="button" onclick="res()" value="c">
td>
<td>
<input type="button" onclick="dis()" value="+/-">
td>
<td>
<input type="button" onclick="ope('%')" value="%">
td>
<td>
<input type="button" onclick="ope('/')" value="/">
td>
tr>
<tr>
<td>
<input type="button" onclick="num('7')" value="7">
td>
<td>
<input type="button" onclick="num('8')" value="8">
td>
<td>
<input type="button" onclick="num('9')" value="9">
td>
<td>
<input type="button" onclick="ope('*')" value="x">
td>
tr>
<tr>
<td>
<input type="button" onclick="num('4')" value="4">
td>
<td>
<input type="button" onclick="num('5')" value="5">
td>
<td>
<input type="button" onclick="num('6')" value="6">
td>
<td>
<input type="button" onclick="ope('-')" value="-">
td>
tr>
<tr>
<td>
<input type="button" onclick="num('1')" value="1">
td>
<td>
<input type="button" onclick="num('2')" value="2">
td>
<td>
<input type="button" onclick="num('3')" value="3">
td>
<td>
<input type="button" onclick="ope('+')" value="+">
td>
tr>
<tr>
<td colspan="2">
<input type="button" onclick="num('0')" value="0">
td>
<td>
<input type="button" onclick="num('.')" value=".">
td>
<td>
<input type="button" onclick="out()" value="=">
td>
tr>
table>2. 静态动态界面
jQuery拥有强大的选择器，在不使用id、和class的情况下也可以很好完成CSS样式调整
// 设置字体
$("*").css({"font-size": "20px"});
// 设置按钮宽高边框样式
$("input:button").css({
"width": "50px",
"height": "50",
"border": "1px solid #cccccc"});
// 设置按键“0”的宽度
$("tr:last>td:first-child>input").css({"width": "100px"});
// 设置按钮样式和hover事件样式
$("input:button").css({"background-color": "#dddddd"});
// 设置按钮hover事件样式
$("input:button").hover(
function () {
$("input:hover").css({"background-color": "#c4c4c4"});
},function () {
$("input:button").css({"background-color": "#dddddd"});
$("tr:eq(1)>td:lt(3)>input:button").css({"background-color": "#c0c0c0"})
$("td:last-child>input:button").css({
"background-color": "orange",
"color": "white"});
})
// 设置第一行样式
$("tr:eq(1)>td:lt(3)>input:button").css({"background-color": "#c0c0c0"});
// 设置第一行hover事件样式
$("tr:eq(1)>td:lt(3)>input:button").hover(
function () {
$("input:hover").css({"background-color": "#aeaeae"});
},function () {
$("tr:eq(1)>td:lt(3)>input:button").css({"background-color": "#c0c0c0"});
})
// 设置最后一列样式
$("td:last-child>input:button").css({"background-color": "orange", "color": "white"});
// 设置最后一列hover事件样式
$("td:last-child>input:button").hover(
function(){
$("input:hover").css({
"background-color": "#ee9900",
"color": "white"});
},function(){
$("td:last-child>input:button").css({
"background-color": "orange",
"color": "white"});
})
// 设置显示屏input的样式
$("#screen").css({
"width": "180px",
"height": "80",
"border": "0px",
"text-align": "right",
"background-color": "black",
"color": "white"
});
script>至此计算器已经基本成型
3. 完成运算逻辑
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
// 导入jQuery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
<script type="text/javascript">
// 声明变量并初始化
var num1 = "";
var num2 = "";
var result = "";
var temp = "";
var oper = "+";// 默认相加
// 输入数据
function num(num) {
if (temp !== "" && temp !== result){
// temp有数据，将数据拼接到已有数据后
if (!(temp.indexOf(".") !== -1 && num === ".")){
// 如果temp已经存在小数点则不能再次输入小数点
temp = temp + num;
}
} else if (num === ".") {
// temp没有数据如直接输入小数点
temp = "0.";
} else {
// temp没有数据，将数据替换到temp
temp = num;
}
// 输出当前数值
document.getElementById("screen").value = temp;
}
// 输入运算符
function ope(operator) {
if (temp === "-"){
temp = "";
}
// 替换当前运算符
oper = operator;
if (num1 === "" && temp === "" && result === ""){
// 没有输入第一个数且没有上一次运算结果，第一个数值默认为0
num1 = "0";
} else if (num1 === "" && temp === "" && result !== ""){
// 没有输入第一个数但有运算结果，第一个数默认result
num1 = result;
result = ""
} else if (num1 !== "" && temp !== ""){
// 输入第一个数，temp有值，将temp值替换到num1
out();
num1 = result;
temp = "";
} else{
// temp有值，将temp值替换到num1
num1 = temp;
temp = "";
result = ""
}
}
// 输出结果
function out() {
if (temp === "-"){
temp = "";
}
if (num1 === "" && temp === "") {
// 没有任何数据，默认为0
num1 = "0";
num2 = "0";
} else if(num1 === "" && temp !== result){
// 只有一个数据且不为计算结果，直接运算
num1 = "0";
num2 = temp;
} else if(num1 === "" && temp === result){
// 只有一个数据且为计算结果，对计算结果执行上一步运算
num1 = temp;
} else if(num1 !== "" && temp === ""){
num2 = "0";
} else {
// 有两个数据，直接运算
num2 = temp;
}
cal();
num1 = "";
result = result.toString();
temp = result;
document.getElementById("screen").value = temp
}
function cal() {
switch (oper) {
case "+":
result = parseFloat(num1) + parseFloat(num2);
break;
case "-":
result = parseFloat(num1) - parseFloat(num2);
break;
case "*":
result = parseFloat(num1) * parseFloat(num2);
break;
case "/":
if (num2 === "0"){
alert("除数不能为0");
num1 = 0;
num2 = 1;
}
result = parseFloat(num1) / parseFloat(num2);
break;
case "%":
result = parseFloat(num1) % parseFloat(num2);
break;
default:
break;
}
}
// 初始化
function res() {
num1 = "";
num2 = "";
result = "";
temp = "";
oper = "+";
document.getElementById("screen").value = "0"
}
// 取相反数
function dis() {
if (temp === ""){
temp = "-";
} else {
temp = (-parseFloat(temp)).toString();
}
document.getElementById("screen").value = temp;
}
script>
head>
<body>
// 第一步中的页面结构代码
// 第二步中的样式代码
body>
html>至此，完成，剩下js运算的精度问题可以问一下度娘。