效果展示
可以实现的计算功能包含：
All clear 、 clear 、百分比 、加 、 减 、乘 、除 、取负数 、小数
完整代码
代码结构
HTML/PHP代码:calculator.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>php/html+css+js制作计算器</title>
<link rel="stylesheet" href="css/calculator.css">
</head>
<body>
<!-- 计算器 -->
<div id="calculator">
<table>
<!-- 显示区 -->
<tr id="display">
<td align="center" colspan="4"><input type="text" readonly="readonly" value="0" id="note"></td>
</tr>
<!-- 按钮区 -->
<tr class="func">
<td align="center" ;><input type="button" class="btno" value="AC" id="aclear" onclick="clearNote(this)"></td>
<td align="center" ;><input type="button" class="btno" value="+/-" onclick="negate(this)"></td>
<td align="center" ;><input type="button" class="btno" value="%" onclick="percent()"></td>
<td align="center" ;><input type="button" class="btno" value="÷" onclick="operationShow(this)"></td>
</tr>
<tr>
<td align="center" ;><input type="button" class="btn" value="7" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="8" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="9" onclick="countSHow(this)"></td>
<td align="center" class="func"><input type="button" class="btno" value="×" onclick="operationShow(this)"></td>
</tr>
<tr>
<td align="center" ;><input type="button" class="btn" value="4" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="5" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="6" onclick="countSHow(this)"></td>
<td align="center" class="func"><input type="button" class="btno" value="-" onclick="operationShow(this)"></td>
</tr>
<tr>
<td align="center" ;><input type="button" class="btn" value="1" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="2" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="3" onclick="countSHow(this)"></td>
<td align="center" class="func"><input type="button" class="btno" value="+" onclick="operationShow(this)"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" class="btn0" value="0" onclick="countSHow(this)"></td>
<td align="center" ;><input type="button" class="btn" value="." onclick="dot(this)"></td>
<td align="center" class="func"><input type="button" class="btno" value="=" onclick="result(this)"></td>
</tr>
</table>
</div><!-- calculator -->
<!-- 计算器的js代码 -->
<script src="js/calculator.js"></script>
</body>
</html>
css代码:calculator.css
* {
margin: 0px;
}
input {
width: 50px;
height: 50px;
border: 1px solid black;;
}
#calculator {
display: block;
width: 200px;
height: 300px;
position: relative;
top: 250px;
margin: auto;
}
/* td{
border: 1px solid black;
} */
#display {
width: 200px;
/* border: 1px solid black; */
background-color: #000000;
}
#note {
width: 190px;
height: 50px;
background-color: #000000;
color: white;
font-size: 18px;
text-align: right;
}
.btn {
background-color: rgb(92, 88, 88);
border-radius: 0px;
border: 1px solid black;
}
.btn0 {
width: 100px;
background-color: rgb(92, 88, 88);
border-radius: 0px;
/* border: 1px solid black; */
}
.btno {
border-radius: 0px;
/* border: 1px solid black; */
background-color: yellow;
}
js代码:calculator.js
/*
* @Author: caesarding
* @Date: 2020-04-05 16:51:37
* @Last Modified by: dingtao
* @Last Modified time: 2020-04-08 19:10:25
*/
/*
简易计算器--2.0：
1.限制最小数和最大数的长度。
2.实现添加小数点和去除小数点
3.数字键能累积显示，结果可以累积运算（修复累加结果错误）
4.初次运算，运算符后没有数字实行默认加0操作
6.禁止用户使用非法违规操作
7.可以切换运算符（修复连续重复使用功能键导致num1被清零的bug）
*/
num1 = 0; //保存第一值
num2 = 0; //保存第二值
op = ""; //保存运算符
opresult = 0; //保存结果，用于连续计算
// flag = false; //判断是否为得出结果后的再次运算 用aclear.value的值进行简化替代flag 太麻烦了 还是不变了
flag = false; //判断是否重新开始运算 true为允许计算
isprotect = false; //判断计算器是否处于保护状态
// 屏幕显示字符串
opScreen = document.getElementById("note");
aclear = document.getElementById("aclear");
//屏幕数字按钮功能
function countSHow(n) {
//是否重新开始运算
if (flag) {
// alert("已经为您重新开始计算！正在清空所有储存器！");
clearNote(AC); //清楚寄存器
flag = false; //切换继续运算模式
}
// 输入长度限制
if (opScreen.value.length > 12) {
alert("对不起！太长啦！我记不住啦！😣😣😣");
// opScreen.value = "0";
} else {
if (opScreen.value == "0") {
// opScreen.value == "除数不为0" ||
// opScreen.value == "超出运算范围" ||
// opScreen.value == "非法输入" 等结果只允许AC操作
opScreen.value = n.value; //清楚屏幕，获取第一个数字
isprotect = false;
} else {
opScreen.value += n.value; //追加数字
};
}
aclear.value = "C"; //改变ac到c
}
//点功能
function dot() {
if (isprotect) {
alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
opScreen.value = "非法输入";
} else{
var screenText = opScreen.value;
if (screenText.indexOf(".") < 0) {
opScreen.value += ".";
}
//实现重复按点取消点
var i = screenText.length;
if (screenText.substring(i-1)==".") {
opScreen.value = screenText.substring(0,i-1);
}
{
// opScreen.value -= ".";
// alert("你又点我干嘛！😡😡😡");
}
}
}
//一按运算符，计算器顶部显示运算过程，并更新num1和运算符
function operationShow(o) {
if (isprotect) {
alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
opScreen.value = "非法输入";
} else {
if(opScreen.value!=0){//保护num1，防止多次输入运算符导致数据丢失
num1 = parseFloat(opScreen.value);
//通过flag可以保证，不输入时num1含有默认值0，而不是延用上次运算结果
}
flag = false;
op = o.value;
opScreen.value = "0";
}
}
/*等于，计算并在显示屏输出结果*/
function result() {
if (isprotect) {
clearNote(AC);
} else {
if (flag) { //解决计算器不能连续运算问题
num1 = parseFloat(opScreen.value);
} else {
num2 = parseFloat(opScreen.value); //计算num2的值
}
switch (op) {
case "÷":
opresult = divide(num1, num2);
break;
case "×":
opresult = times(num1, num2);
break;
case "+":
opresult = plus(num1, num2);
break;
case "-":
opresult = minus(num1, num2);
break;
default:
opresult = plus(num1, num2);
}
//输出结果
flag = true; //允许重新运算
aclear.value = "AC";
if (opScreen.value.length > 10) {
alert("对不起，太大了！我手指不够用啦😭😭😭");
opresult = "超出运算范围";
isprotect = true; //保护计算器并中断运算
}
opScreen.value = opresult;
console.log("opScreen.value.length=", opScreen.value.length);
}
}
/*加*/
function plus(x, y) {
return parseFloat(x) + parseFloat(y);
}
/*减*/
function minus(x, y) {
return x - y;
}
/*乘*/
function times(x, y) {
return x * y;
}
/*除*/
function divide(x, y) {
if (y == "0") {
alert("求你不要开除我好不好😢😢😢");
return "除数不能为0";
} else {
return x / y;
}
}
/*百分号*/
function percent() {
if (isprotect) {
alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
opScreen.value = "非法输入";
} else {
opScreen.value = opScreen.value / 100;
}
}
/*取负数*/
function negate() {
if (isprotect) {
alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
opScreen.value = "非法输入";
} else {
opScreen.value = -opScreen.value;
}
}
/*重置*/
// 重要！
// clear是js的内置函数，如果clearNote命名为clear时，则会出现没有任和报错的错误！！
function clearNote(c) {
if (c.value == "AC") {
opScreen.value = "0";
num1 = 0;
num2 = 0;
op = "";
opresult = 0;
flag = false;
isprotect = false;
} else {
opScreen.value = "0";
}
}
// function roundFun(value, n) {
// return Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
// }
/*
* @Author: caesarding
* @Date: 2020-04-05 16:51:37
* @Last Modified by: dingtao
* @Last Modified time: 2020-04-05 16:51:37
*/
/*
简易计算器--1.0：
*/
num1 = 0; //保存第一值
num2 = 0; //保存第二值
op = ""; //保存运算符
opresult = 0; //保存结果，用于连续计算
// flag = false; //判断是否为得出结果后的再次运算 用aclear.value的值进行简化替代flag 太麻烦了 还是不变了
flag = false;
// 屏幕显示字符串
opScreen = document.getElementById("note");
aclear = document.getElementById("aclear")
/*按数字的屏幕显示控制：如果屏幕显示是0，按n替换为n，显示不为0则追加字符 */
function countSHow(n) {
//是否重新开始运算
if (flag) {
clearNote(aclear.value);
flag = false;
}
// 字符串长度限制
if (opScreen.value.length > 20) {
alert("超过限制!请重新输入");
opScreen.value = "0";
} else {
if (opScreen.value == "0" || opScreen.value == num1 || opScreen.value == "除数不为0") {
opScreen.value = n.value;
} else {
opScreen.value += n.value;
};
}
//改变ac到c
aclear.value = "C";
}
/*按点时的屏幕显示控制：已存在'.'，则不加'.'，否则追加'.'*/
function dot() {
var screenText = opScreen.value;
if (screenText.indexOf(".") < 0) {
opScreen.value += ".";
} else {
alert("wrong input");
}
}
//一按运算符，计算器顶部显示运算过程，并更新num1和运算符
function operationShow(o) {
flag = false;
num1 = parseFloat(opScreen.value);
op = o.value;
opScreen.value = "0";
}
/*等于，计算并在显示屏输出结果*/
function result() {
num2 = parseFloat(opScreen.value);
switch (op) {
case "÷":
opresult = divide(num1, num2);
break;
case "×":
opresult = times(num1, num2);
break;
case "+":
opresult = plus(num1, num2);
break;
case "-":
opresult = minus(num1, num2);
break;
default:
opresult = plus(num1, num2);
}
opScreen.value = opresult;
flag = true; //判断是否继续运算
aclear.value = "AC";
}
/*加*/
function plus(x, y) {
return parseFloat(x) + parseFloat(y);
}
/*减*/
function minus(x, y) {
return x - y;
}
/*乘*/
function times(x, y) {
return x * y;
}
/*除*/
function divide(x, y) {
if (y == "0") {
return "除数不为0";
} else {
return x / y;
}
}
/*百分号*/
function percent() {
opScreen.value = opScreen.value / 100;
}
/*取负数*/
function negate() {
opScreen.value = -opScreen.value;
}
/*重置*/
// 重要！
// clear是js的内置函数，如果clearNote命名为clear时，则会出现没有任和报错的错误！！
function clearNote(c) {
if (c.value == "AC") {
opScreen.value = "0";
num1 = 0;
num2 = 0;
op = "";
opresult = 0;
} else {
opScreen.value = "0";
}
}
思考总结
关于html
<script src="../js/calculator.js"> </script>的位置一定要放在最后，否则可能会出现的错误如下
Uncaught TypeError: Cannot read property ‘value’ of null
at countSHow (calculator.js:27)
at HTMLInputElement.onclick (main.php:42)
问题出在JS运行的时候你的页面还没有加载完成，所以你的JS代码找不到你的页面元素，就会抛出这个问题。解决办法就是把JavaScript代码放在body的最后。
- 标签的align属性
- 标签的readonly属性
- 标签下面的colspan（跨列）和rowspan（跨行）属性
关于js
- 注意函数命名不要使用内置函数！例如：clear。否则则会出现没有任和报错的错误现象，即函数无法正常调用。ps：clear函数作用是清除指定文档的内容。
关于css
- 设置input内容的颜色
- 设置按钮样式
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
