本文详细介绍了自制简易计算器的设计与实现过程，包括界面布局、功能实现及代码逻辑。重点讨论了四则运算的处理、浮点数运算的精度问题及计算器的容错性设计。
效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yfSicHs5-1587260963815)(https://i.loli.net/2019/06/27/5d14841230b7083721.jpg)]
心得总结
*都是一些比较简单的功能，这里主要说一下还没能实现，或是想要实现的功能，等以后想做了再加
- 现在的四则运算顺序是顺序执行，即没有实现四则运算的优先级
- 不能查看输入的算术式
这两个功能实现之后个人感觉和手机计算器也就没啥差距了，这个代码最难的部分不是计算，而是其中的逻辑判断，刚开始没有考虑周全，好多都是以为完成了然后又测出BUG，比如说"6 - ="，" * 9 = " ,“4 + + + - - - * * =”
刚开始没有考虑这些神奇操作，导致程序没有一点的容错性，一乱输就直接挂掉了，还有就是上次的运算结果，在进行新的运算的时候要不要用，这些都是花了较长时间，成功把问题想复杂的了。
现在所实现的计算器还是有一定的容错性的。
注意事项：
- 在进行小数运算的时候要注意进行浮点运算时要对数据进行处理，代码中有进行介绍，再具体的可以看我这篇总结JS浮点运算出现精度丢失处理总结
代码
Css
<style type="text/css">
body{
background-image:url(img/初音1.jpg);
background-size: cover;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.calculator {
width: 326px;
height: 460px;
margin: 10.8% 12%;
background-color: #368590;
border-radius: 8px;
box-shadow: 0 2px 15px black;
overflow: hidden;
filter: alpha(Opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
.calculator .c_screen {
position: relative;
width: 326px;
height: 110px;
/* background-color: #96a4c2; */
background-color: black;
border-radius: 5px;
box-shadow: inherit;
filter: alpha(Opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
.calculator .c_screen>p {
position: absolute;
top: 50%;
margin-top: -28px;
width: 236px;
text-align: right;
word-break: break-all;
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 10px 45px;
}
.calculator .c_row {
margin: 0 23px;
}
button {
cursor: pointer;
width: 60px;
height: 45px;
margin: 20px 2px 0;
border: 0px;
border-radius: 5px;
color: #fff;
background-color: #2b2f5b;
outline: none;
}
button::selection {
color: #fff;
}
button:active {
box-shadow: 0 0 5px 5px dodgerblue;
}
.c_func_btn {
background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
}
.c_func_btn1 {
background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
}
.d {
width: 60px;
height: 110px;
float: right;
position: relative;
bottom: 66px;
right: 32px;
}
.z {
width: 129px;
height: 45px;
}
</style>
Html
<div class="calculator">
<div class="c_screen">
<p id="show">0</p>
</div>
<div class="c_btn_wrapper">
<div class="c_row">
<button id="clear" class="c_func_btn1">AC</button>
<button id="del" class="c_func_btn1">CE</button>
<button class="c_func_btn">*</button>
<button class="c_func_btn">/</button>
</div>
<div class="c_row">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="c_func_btn">+</button>
</div>
<div class="c_row">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="c_func_btn">-</button>
</div>
<div class="c_row">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
</div>
<button id="result" class="c_func_btn1 d">=</button>
<div class="c_row ">
<button class="z num">0</button>
<button class="num" id="xiaoshu" >.</button>
</div>
</div>
</div>
</body>
##### Js
<script type="text/javascript">
/* 思路：1.布局页面
2.页面按键分为三类 数字和小数点归为一类，操作符归为一类， 退格 等号 清除 显示框 单独的
3.通过id 或者class 先获取出这些dom元素
4.把我们点的数字显示上去,我们需要给所有数字设置点击事件
*/
//获取显示框
var show_result = document.getElementById("show");
//获取清除键
var clear_btn = document.getElementById("clear");
//获取退格键
var del_btn = document.getElementById("del");
//获取等号
var result_btn = document.getElementById("result");
//获取小数点
//var point_btn = document.getElementById("xiaoshu");
//获取所有的数字键
var nums = document.getElementsByClassName("num");
//获取所有的操作符键
var czfs = document.getElementsByClassName("c_func_btn");
//定义三个变量,来存储第一个数字,第二个数字,运算符
var numValue1 = '';
var numValue2 = '';
var flag1=true;
var ysf = '';
//给数字置点击
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function() {
//取出标签之间的数字
//点击0
if (this.innerText == '0') {
numValue1 = zero1();
//点击小数点
} else if (this.innerText =='.') {
//alert("小数点函数")
numValue1 = radixpoint();
} else
{
// alert("验证")
//去除第一个0
if (numValue1 == '0') {
numValue1 = this.innerText;
} else {
if(!flag1){
numValue2='';
ysf='';
flag1=true;
}
numValue1 += this.innerText;
}
//注意this代表的是你点击的那个元素对象
//alert(v);
}
// show_result.value = numValue1*1;
//alert(numValue1+" numValue1要显示了")
//alert("初始值"+show_result.innerText)
show_result.innerText = numValue1;
//alert("已经显示了")
}
}
// var FirstZero=function(){
// alert("进来了")
//
// return numValue1;
// }
//0验证函数
var zero1 = function() {
// alert("调用函数")
if (numValue1.length == 0) {
//alert("0长度为0")
return '0';
} else if (numValue1.length >= 1) {
//alert( numValue1+"‘0’长度大于等于1")
if (numValue1 == "0" ) {
return '0';
} else {
//alert(numValue1+"返回")
return numValue1 += '0';
}
}
}
//小数点验证函数
var radixpoint = function() {
//小数点自动补0
var flag = true;
//alert(ele[0]);
if (numValue1 == "") {
//alert("神奇")
return "0."
} //验证已经有小数点
else {
for (var i = 1; i < numValue1.length; i++) {
//alert(numValue1[i])
if (numValue1[i] == '.') {
flag = false;
break;
}
}
if (flag) {
// alert("神奇1")
return numValue1 += '.';
} else {
// alert("神奇2")
return numValue1;
}
}
}
//给操作符设置点击事件
for (var i = 0; i < czfs.length; i++) {
czfs[i].onclick = function() {
// if (numValue1 = ''&&numValue2='') {
// numValue1 = numValue3;
// ysf = this.innerText;
// } else
if(!flag1){
flag1=true;
}
if (numValue2 == '') {
//当你点击操作符号时:我们把第一个数字,给第二个数字,然后把第一个数字清空,用来接收用户下次的输入
//保存操作符ysf = this.innerText;
numValue2 = numValue1;
numValue1 = '';
ysf = this.innerText;
} else if(numValue1!=''){
//处理四则运算
//把上一次两个数运算的结果算出来,赋值给numValue2 再把numValue1清空,去接收下一次的输入
//alert("进入运算程序")
resultFun();
ysf = this.innerText;
}else{
ysf = this.innerText;
}
}
}
//给等号设置监听,运算结果
result_btn.onclick = function() {
flag1=false;
resultFun();
}
function resultFun() {
//把两个字符串数字,转成数字类型
var one = Number(numValue2);
var two = Number(numValue1);
var r = 0;
if(one==''&&two!=''){
numValue2 = numValue1;
numValue1 = '';
}else{
switch (ysf) {
case '+':
r = Number(one).add(two)
// r = one + two;
break;
case '-':
r = Number(one).sub(two)
// r = one - two;
break;
case '*':
r = Number(one).mul(two)
// r = one * two;
break;
case '/':
if (two == 0) {
clean();
r = 0;
alert("除数不能为0");
} else {
r = Number(one).div(two)
//r = one / two;
}
break;
}
// numValue3 = r;
// numValue2 = '';
// numValue1 = '';
// show_result.value = numValue3;
numValue2 = r;
numValue1 = '';
}
show_result.innerText = numValue2;
}
//实现退格键
del_btn.onclick = function() {
//alert("退格");
if (numValue1.length > 1) {
numValue1 = numValue1.substring(0, numValue1.length - 1);
show_result.innerText = numValue1;
}
else{
numValue1='';
show_result.innerText ='0';
}
}
//实现清除键
var clean = function() {
numValue1 = '';
numValue2 = '';
ysf = '';
show_result.innerText = '0';
}
clear_btn.onclick = clean;
//加法
Number.prototype.add = function(arg) {
var r1, r2, m;
try {
r1 = this.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (this * m + arg * m) / m
}
//以下代码为处理由浮点精度引起的0.1+0.2不等于0.3 的问题
//减法
Number.prototype.sub = function(arg) {
return this.add(-arg);
}
//乘法
Number.prototype.mul = function(arg) {
var m = 0,
s1 = this.toString(),
s2 = arg.toString();
try {
m += s1.split(".")[1].length
} catch (e) {}
try {
m += s2.split(".")[1].length
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}
//除法
Number.prototype.div = function(arg) {
var t1 = 0,
t2 = 0,
r1, r2;
try {
t1 = this.toString().split(".")[1].length
} catch (e) {}
try {
t2 = arg.toString().split(".")[1].length
} catch (e) {}
with(Math) {
r1 = Number(this.toString().replace(".", ""))
r2 = Number(arg.toString().replace(".", ""))
return (r1 / r2) * pow(10, t2 - t1);
}
// 5674.784 t1 3 r1*1000 5674784
// 0.323342 t2 6 r2*1000000 0323342
}
</script>
扫一扫
1331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
