使用js写一个功能基本完善的计算器能够实现正确的加减乘除，实现退格和清零。

2024-07-06 06:21| 来源: 网络整理| 查看: 265

前言

效果

优点

具体实现：

前言

这里推荐一个在线制作gif的网站：免费动图在线制作工具 - 在线视频转gif动态图片 - 本地mp4无损快速转换一键下载 - soogif动图 https://www.soogif.com/video。录屏的话可以搜索，下载免费的轻量级录屏工具FSCapture

效果

能够实现正确的加减乘除，实现退格和清零。

优点

代码思路简单，使用js基础知识即可完成，实现运算主要借助字符串的方法。

//退格 var str="12345678"; console.log(str.substr(2,4));//从第3个字符开始截取，截取4个字符 console.log(str.substring(2,4));//从第3个字符开始截，截取到第4个字符 console.log(str.slice(2,4)); // 从第3个字符开始截取到第4个字符 //计算结果 var str1="6+7+8/2"; console.log(typeof eval(str1))//number类型 17 具体实现：

（1）HTML部分

（2）CSS部分

*{margin:0; padding:0;} table{ border-collapse: collapse; margin:50px auto;} input{background-color: #f5f5f5;} input:hover{box-shadow:2px -2px 2px #f5851b;} td{width: 100px;height:70px;line-height: 60px;} .btn{width: 100px;height:70px;line-height: 60px;font-size: 30px;} .btn-click{width: 202px;height:70px;line-height: 60px;font-size: 24px;} .cal{color:#f5851b} .txt{width: 400px;height: 80px;font-size:40px;text-align: right;}

（3）JS部分：

var arr=[];//定义一个数组，接收用户输入的符号和数字 //获取普通按键的值 var btn=document.getElementsByClassName("btn"); //获取结果显示区 var txt=document.getElementsByClassName("txt")[0]; //获取清空退格按钮的值 var btn1=document.getElementsByClassName("btn-click"); //清空退格功能 for(var i=0;i

【本文地址】

公司简介

联系我们