这款计算器的主要功能有加减乘除,平方开方,清零,回退,连续加减乘除等功能。
成品图如下:
功能模块图如下:
整体用一个table标签创建一个五行六列的表格,这里上HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<!--1.加减乘除2.乘方开放3.退格清零4.连加连减-->
<table id="calculator" οnclick="result(event)">
<tr>
<td colspan="6">
<input type="text" class="content">
</td>
</tr>
<tr>
<td><button class="numb" οnclick="buttonClick(this)" value="1">1</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="2">2</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="3">3</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="+">+</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="(">(</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value=")">)</button></td>
</tr>
<tr>
<td><button class="numb" οnclick="buttonClick(this)" svalue="4">4</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="5">5</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="6">6</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="-">-</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="C">C</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="Back">Back</button></td>
</tr>
<td><button class="numb" οnclick="buttonClick(this)" value="7">7</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="8">8</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="9">9</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="*">*</button></td>
<td><button class="numb" οnclick="buttonClick(this)">x<sup>2</sup></button></td>
<td rowspan="2"><button class="numb" οnclick="buttonClick(this)" value="=">=</button></td>
</tr>
<tr>
<td><button class="numb" οnclick="buttonClick(this)" value=".">.</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="0">0</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="00">00</button></td>
<td><button class="numb" οnclick="buttonClick(this)" value="/">/</button></td>
<td><button class="numb" οnclick="buttonClick(this)">√x</button></td>
</tr>
</table>
<div id="audio-box"></div>
<script src="js/calculator.js"></script>
</body>
</html>
下面是CSS代码:
* {
margin: 0;
padding: 0;
}
/*body背景色*/
body {
width: 100%;
background: -webkit-linear-gradient(left, #2b5876, #4e4376);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, #2b5876, #4e4376);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, #2b5876, #4e4376);
/* Firefox 3.6 - 15 */
background: linear-gradient(left, #2b5876, #4e4376);
/* 标准的语法(必须放在q最后) */
}
/*table部分*/
table {
width: 460px;
height: 470px;
margin: 100px auto;
}
table tr {
width: 100%;
height: 20%;
}
table tr td {
box-sizing: border-box;
width: 16.66%;
font-size: 20px;
color: #d7d2cc;
text-align: center;
cursor: pointer;
box-shadow: 0px 0px 4px #F7F7F9 inset;
}
table tr button {
width: 100%;
height: 100%;
outline: none;
background-color: transparent;
border: none;
font-size: 20px;
color: #d7d2cc;
cursor: pointer;
}
table tr button:hover {
opacity: 0.6;
background: linear-gradient(45deg, #2b5876, #4e4376);
}
/*屏幕显示部分*/
table td input {
width: 100%;
height: 100%;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 20px;
color: #d7d2cc;
text-align: right;
}
然后是JS部分,主要是注册一个点击事件,通过获取触发事件的innerHTML来判断接下来的操作
具体代码:
//计算功能
function result(e) {
//获取触发事件的元素
//利用e.target||e.srcElement,获取到触发事件的元素,||连接两个语法是为了解决不同浏览器的兼容性问题。
var obj = e.target || e.srcElement;
if (obj.nodeName != "BUTTON") {
return;
}
var v = obj.innerHTML;
var content = document.querySelector('.content');
if (v === "C") {
content.value = 0;
} else if (v === "=") {
//获取到输入框的值
var exp = content.value;
//这里用try catch抛出异常,针对运算错误的情况
try {
var result = eval("(" + exp + ")");
//将计算结果赋值给输入框
content.value = result;
} catch (e) {
console.log(e);
content.value = "error";
}
} else if (v === "x<sup>2</sup>") {
var result = Math.pow(content.value, 2);
content.value = result;
} else if (v === "√x") {
var result = Math.sqrt(content.value);
content.value = result;
} else if (v === "Back") {
var str = content.value;
var result = str.substring(0, str.length - 1);
content.value = result;
}
else {
if (content.value === "0")
content.value = " ";
content.value += v;
}
}
function buttonClick(obj) {
//点击键有声音效果
document.querySelector('#audio-box').innerHTML = "<audio src='music/cNumber.mp3' controls='controls' autoplay='autoplay' style='display:none;'></audio>";
}