htmledit_views">
目录
一、计算器原理
二、源码
三、结果展示
四、不足与改进
一、计算器原理
首先我们列出想象中简易计算器的样子:
虽然画的磕碜但是应该不影响下面的操作hh
首先想到用表格形式在网页中表示它,是一个5行4列的表格,接着要实现计算器的功能,每个按钮都需要添加事件--->onclick()当鼠标点击时触发, 所有的数字和运算符都要使用onclick触发,等于号和c(清空键)较为特殊,他们需要对应与数字和普通运算符不同的事件:计算结果和清空输入。以及最上方的显示块需要时刻与输入的内容对应也是不同的事件。
运算的过程较为简单,只使用了eval()函数进行计算。
最后就是对计算器输入过程的修饰,计算过程不能出现数字后跟多个运算符的情况,如5++或5+-*/,这样会导致eval()函数无法正常计算,所以需要对输入时的事件进行休整。
二、源码
html"><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {border: 10px;margin: auto;}td {border: 2px solid black; //单元格边框text-align: center;/*单元格内容居中*/padding: 20px;/*内边距*/}</style></head><body><table><tr><td colspan="4" id="result"></td></tr><tr><td onclick="appendresult('7')">7</td><td onclick="appendresult('8')">8</td><td onclick="appendresult('9')">9</td><td onclick="appendresult('+')">+</td></tr><tr><td onclick="appendresult('4')">4</td><td onclick="appendresult('5')">5</td><td onclick="appendresult('6')">6</td><td onclick="appendresult('-')">-</td></tr><tr><td onclick="appendresult('1')">1</td><td onclick="appendresult('2')">2</td><td onclick="appendresult('3')">3</td><td onclick="appendresult('*')">*</td></tr><tr><td onclick="appendresult('0')">0</td><td id="clear" onclick="clearall()">c</td><td onclick="caculate()">=</td><td onclick="appendresult('/')">/</td></tr></table></body><script>var inputment = ""; //输入的内容function appendresult(value) {// 判断value是数字还是符号if (value == "+" || value == "-" || value == "*" || value == "/") {// 检查最后一个字符是否为运算符if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||inputment[inputment.length - 1] == "-" ||inputment[inputment.length - 1] == "*" ||inputment[inputment.length - 1] == "/")) {return; // 如果是运算符,则不添加新的运算符,return不进行任何操作}inputment += value; // 添加新的运算符} else {// 如果是数字,直接添加inputment += value;}update();}function caculate() {var result = eval(inputment);inputment = result.toString(); //更新全局变量update();}function update() {document.getElementById("result").innerText = inputment || "0";}function clearall() {document.getElementById("result").innerText = "";inputment = "";}</script>
</html>
三、结果展示
可以看到不会出现多个运算符重复出现的错误。
四、不足与改进
在制作此计算器时,用的是表格来表示计算器,没有考虑到点击形式的问题,使得在使用时鼠标全程是I的状态,不是点击状态,用起来十分别扭,除了将整个表格变成<input>中的按钮状态外,有更便捷的方法来解决:
可以在td的类选择器中添加
cursor: pointer; /* 鼠标悬停时显示手型光标 */
为了使用时更加便捷,还可以使用伪类添加鼠标悬停时的背景色以及点击时的背景色:
td:hover { background-color: #f0f0f0; /* 鼠标悬停时的背景色 */ }
td:active { background-color: #d0d0d0; /* 点击时的背景色 */ }
最后的效果:
此时的鼠标放在了数字7上,并且是点击态,再点击后颜色会加深一点。
改进后的代码:
html"><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {border: 10px;margin: auto;}td {border: 2px solid black; //单元格边框text-align: center;/*单元格内容居中*/padding: 20px;/*内边距*/cursor: pointer;/* 鼠标悬停时显示手型光标 */}td:hover {background-color: #f0f0f0;/* 鼠标悬停时的背景色 */}td:active {background-color: #d0d0d0;/* 点击时的背景色 */}</style></head><body><table><tr><td colspan="4" id="result"></td></tr><tr><td onclick="appendresult('7')">7</td><td onclick="appendresult('8')">8</td><td onclick="appendresult('9')">9</td><td onclick="appendresult('+')">+</td></tr><tr><td onclick="appendresult('4')">4</td><td onclick="appendresult('5')">5</td><td onclick="appendresult('6')">6</td><td onclick="appendresult('-')">-</td></tr><tr><td onclick="appendresult('1')">1</td><td onclick="appendresult('2')">2</td><td onclick="appendresult('3')">3</td><td onclick="appendresult('*')">*</td></tr><tr><td onclick="appendresult('0')">0</td><td id="clear" onclick="clearall()">c</td><td onclick="caculate()">=</td><td onclick="appendresult('/')">/</td></tr></table></body><script>var inputment = ""; //输入的内容function appendresult(value) {// 判断value是数字还是符号if (value == "+" || value == "-" || value == "*" || value == "/") {// 检查最后一个字符是否为运算符if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||inputment[inputment.length - 1] == "-" ||inputment[inputment.length - 1] == "*" ||inputment[inputment.length - 1] == "/")) {return; // 如果是运算符,则不添加新的运算符,return不进行任何操作}inputment += value; // 添加新的运算符} else {// 如果是数字,直接添加inputment += value;}update();}function caculate() {var result = eval(inputment);inputment = result.toString(); //更新全局变量update();}function update() {document.getElementById("result").innerText = inputment || "0";}function clearall() {document.getElementById("result").innerText = "";inputment = "";}</script>
</html>