位置: 编程技术 - 正文

JS 实现计算器详解及实例代码(一)(js实现计算器代码)

编辑:rootadmin

推荐整理分享JS 实现计算器详解及实例代码(一)(js实现计算器代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js做计算器代码,js写计算器的思路,js写计算器的思路,js计算器函数,如何用js实现一个简单的计算器,js写计算器的思路,js 实现计算器详细讲解,js 实现计算器详细讲解,内容如对您有帮助,希望把文章链接给更多的朋友!

Javascript 实现计算器:

系列文章:

JS 实现计算器详解及实例代码(一)

Javascript 实现计算器时间功能详解及实例(二)

小型JavaScript计算器

自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理。

总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码;

面板(main-board)

面板整体尺寸设计

标题栏(board-title)

字体: font: px/px “Comic Sans MS”, “微软雅黑”; 宽高:(%, px);

屏显区(board-result)

数字显示区(result-up): 表达式显示区(result-down):

按钮区(board-keys),使用表格完成,然后给每个td添加onclick事件

完成界面

导入新字体

代码分析

代码组织结构

计算器对象:Calculator;

JS 实现计算器详解及实例代码(一)(js实现计算器代码)

计算器属性:

bdResult: 计算器面板上的屏显区DOM对象; operator:操作符数组,包括'+,-,×,÷,='; digits:有效数字字符,包括'0-9'和点'.'; dot, equal, zero:'.', ‘=', ‘0'对应三个字符,点,等号,字符'0'; digit:屏显区上层的显示的当前输入的数字; expression:屏显区下层的显示的输入的数字和操作符组成的表达式; resSpan:屏显区上层的显示当前数字的span对象; resDown:屏显区下层的显示表达式的div对象; last:上一次输入的按钮内容; allDigits:用表达式解析出来的表达式中所有的有效数字; ops:用表达式字符串解析出来的表达式中所有的操作符; hasEqual:判断是否按了'='等号的标识符; lastRes:上一次计算出来的结果[TODO],尚未用到,待实现可以连续计算;

计算器方法:

init:计算器初始化方法; addTdClick:给每个td即计算器按钮添加点击事件; calculatorClickEvent:点击事件; btnClickHanlder:点击事件处理函数; showCurrRes:处理屏显区上层和下层将要显示的内容; showText:将通过showCurrRes处理的结果显示出来; addZero:对表达式前面加'0'操作; calResult:计算结果; clearData:清空数据; hasOperator:判断表达式中是否有操作符; isOperator:判断当前字符是否是操作符; delHeadZero:删除表达式开头的'0';

辅助方法

getResSpan:获取屏显上层的span对象; $tag:根据标签名去获取标签对象; $:根据id去获取DOM对象;

代码逻辑

使用方法

引入Calculator.js文件(在编写完UI的基础上) 创建对象并初始化:new Calculator().init();

计算器对象

添加点击事件(注意this在闭包里的引用问题)

计算器点击事件处理入口

计算器点击事件处理程序

处理将要显示的表达式和当前输入的数字

将处理结果显示到屏显区

计算结果函数

清空数据

辅助函数

处理表达式开头的'0'问题(第一个按钮是0键或者第一个是小于1的浮点数,表达式需要补零;)

开头去零函数

判断字符串里是否含有操作符

其他函数

问题

文字底部显示:通过设置行高处理; 通过一次性解析表达式需要考虑表达式开头是否需要'0'存在;

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

React Router基础使用 React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术ReactRouter是React的路由库,保持相关页面部件与URL间

原生js实现节日时间倒计时功能 知识要点1.实现原理:用结束时间-当前时间=时间差当前时间每过1秒时间差自然也就少了1秒所以要1秒更新一次当前时间就达到了倒计时的效果2.需要注

前端编码规范(3)JavaScript 开发规范 JavaScript规范变量声明总是使用var来声明变量。如不指定var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义

标签: js实现计算器代码

本文链接地址:https://www.jiuchutong.com/biancheng/376039.html 转载请保留说明!

上一篇:javascript 注释代码的几种方法总结(js注释方法)

下一篇:React Router基础使用(react-router react-router-dom)

  • 自行申报是什么征收方式
  • 递延所得税资产会计处理全过程
  • 工资申报是当月申报当月的吗
  • 计提年终奖可以冲减利润
  • 坏账核销的会计规定
  • 现金流量表财务净现值怎么算
  • 进项税的现金流量项目
  • 企业内部商品转移怎么核算
  • 高薪技术企业研发人员人数
  • 增值税税率调整时间17变16
  • 应交税费待抵扣进项税额
  • 佣金支付方式有哪几种
  • 开租金发票可以提前开的吗?
  • 员工垫付差旅费 民间借贷
  • 少数股东损益为正,归属毌公司为负
  • 往来款项分为哪两类
  • 考后审核是什么时候
  • 怎样解除机房
  • 企业增加值的计算
  • 银行发放贷款银行会计怎么做账务处理
  • 职工教育经费是工资总额的多少
  • 生产型企业公司有哪些
  • 教你如何正确选择轮胎
  • php的file函数
  • 引入人工智能
  • php字符串函数大全
  • 外汇收入情况说明
  • phpget方法
  • 存货报废如何账务处理
  • 委托境外机构研发费加计扣除80%
  • 中国网购软件
  • Loughrigg Tarn的日出,英国英格兰湖区安布尔塞德 (© John Finney photography/Getty Images)
  • 交强险必须交车船税一年多少钱
  • php socket_create
  • 原材料入账价值包括代垫运费吗
  • php返回上一级
  • 收到事业单位分红怎么办
  • 坏账准备的账务处理例题
  • 现金流量表填写说明
  • 城市维护建设税,教育费附加,地方教育费附加
  • mongodbwin7能安装么
  • 帝国cms结合项多选
  • 小规模纳税人的税率是多少
  • 民间非营利组织有哪些
  • 事业单位成本核算具体指引—公立医院
  • 财务报表审计的基础是独立性和专业性
  • 复印件可以作为会计原始凭证吗
  • 销售收入五步法
  • 固定资产当月入账当月计提吗
  • 不动产初始登记证明
  • 企业合并中或有对价的会计处理
  • 公司配股对股价的影响
  • 一般纳税人购入固定资产进项抵扣
  • 建厂房之前需要什么条件
  • mac中怎么给表情添加文字
  • mac更换软件图标
  • Linux系统怎么调整屏幕亮度
  • centos7 tcp6
  • 电脑ems是什么意思啊
  • u盘安装win10ghost
  • msoobe.exe是什么
  • linux shell 函数参数
  • windows7的注册表在哪里
  • win7共享文件夹关闭密码保护
  • win10系统没有关机选项
  • jquery的实现原理
  • html截取字符串
  • 元素显示模式
  • 设计shell程序
  • shell脚本实现批量移动文件
  • 用python写随机数
  • unity中ngui
  • js dom方法
  • python汉字
  • 税控盘税务数字证书密码是什么
  • 新电子税务局使用方法
  • 国家税务定额发票票样
  • 高新企业公布
  • 重庆税务查询企业信息查询系统
  • 公司注册资本印花税的税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设