位置: IT常识 - 正文

用HTML实现简易版计算器(简易html代码)

编辑:rootadmin
用HTML实现简易版计算器

推荐整理分享用HTML实现简易版计算器(简易html代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何用html,html简单,简易html代码,用html语言制作简单的网页,html简单例子,html运用,html简单例子,用html语言制作简单的网页,内容如对您有帮助,希望把文章链接给更多的朋友!

计算器功能:实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。

运行结果如下:

引入的图片:back.png

用HTML实现简易版计算器(简易html代码)

HTML部分:用table表格添加计算器的按键,给每个按键设置一个相应的单击事件,点击一个按键后在div块里显示相应的内容。

<div><span id="result"></span></div><table border="1px" width="200px" height="300px"><tbody align="center"><tr><td width="50px" onclick="leftBracket()">(</td><td width="50px" onclick="rightBracket()">)</td><td width="50px" onclick="ppow()">^</td><td width="50px" onclick="psqrt()">√</td></tr><tr><td onclick="c()">C</td><td onclick="po('%')">%</td><td width="50px" onclick="backspace()"><img src="img/back.png" width="25px"/></td><td onclick="po('÷')">÷</td></tr><tr><td onclick="pn(7)">7</td><td onclick="pn(8)">8</td><td onclick="pn(9)">9</td><td onclick="po('×')">×</td></tr><tr><td onclick="pn(4)">4</td><td onclick="pn(5)">5</td><td onclick="pn(6)">6</td><td onclick="po('-')">-</td></tr><tr><td onclick="pn(1)">1</td><td onclick="pn(2)">2</td><td onclick="pn(3)">3</td><td onclick="po('+')">+</td></tr><tr><td onclick="pn('00')">00</td><td onclick="pn(0)">0</td><td onclick="pn('.')">.</td><td onclick="equals1()">=</td></tr></tbody></table>

 CSS部分:通过绝对定位将所需显示的内容定位到div块右下角。注意:绝对定位是根据有定位的第一个先祖标签进行定位的,但div块并不需要移动位置,因此这里给div添加相对定位;div块边框需要与table边框对齐,table的总宽度为200px,div块的左右边框占2px,所以width需要设置为198px。

    div {         width: 198px;         height: 50px;         border: 1px solid black;         border-bottom: none;         position: relative;     }          #result {         position: absolute;         right: 5px;         bottom: 5px;     }

JavaScript部分:通过innerTHML属性添加 / 获取所需计算的内容,再调用eval方法将获取到的内容转换为js代码进行计算。

"%":计算器中的"%"一般为百分数,在进行运算时需要将"%",换为"*0.01"进行运算。

回退:通过innerTHML属性得到字符串,将最后的字符去掉,再重新赋值给innerTHML属性。

幂运算:用split方法将"^"前后分开,再查找进行此次幂运算的表达式,如数值、带括号的表达式等等。前半部分从字符串最后往前找,而后半部分则从前往后找,将查找匹配表达式的过程封装到leftOperation(r)方法和rightOperation(r)方法中,找到这些匹配的表达式后将此表达式返回给变量leftstr和rightstr,将要参与幂运算的leftstr和rightstr跟Math.pow方法进行幂运算的拼接即拼接成字符串:"Math.pow(leftstr, rightstr)"的格式赋值给num,通过substring方法将"^"左右部分的字符串去掉进行幂运算的相关部分后再将num拼接到原"^"位置。"^"操作符可能不止一个,用递归调用的方式在pow方法中再调用pow方法直到没有"^"为止。

根式运算:对根号后面的数或表达式进行根式运算,用indexof方法判断有无根号,如果有根号通过split方法将根号前后的数或表达式分开,将根号后面的数或表达式通过rightOperation(r)方法单独取出赋值给rightstr,将此rightstr跟Math.sqrt方法进行字符串拼接即拼接成:"Math.sqrt(rightstr)"的格式后赋值给num,最后通过substring方法将根号后面部分的字符串去掉进行根式运算的相关部分后再将num拼接到原根号位置。同幂运算一样,根号也可能有多个所以要用到递归。

在数学中括号、根号等前面的乘号可以省略,所以要在输入左括号、根号时做判断,判断前面的是数字还是运算符,如果是数字或"%",则在输入左括号、根号前加一个乘号,如果是运算符则直接输入。

//div块元素var result;//是否进行了运算var equal = false;window.onload = function(){result = document.getElementById("result");result.innerHTML = "";}//如果进行了运算,下次输入数前进行清零function isEqual(){if (equal){c();equal = false;}}function pn(n){isEqual();result.innerHTML += n;}function po(o){result.innerHTML += o;equal = false;}function leftBracket(){isEqual();var r = result.innerHTML;var c = r.charAt(r.length - 1);if ("0" <= c && c <= "9" || c == "%"){po("×");}result.innerHTML += "(";}function rightBracket(){isEqual();result.innerHTML += ")"}function ppow(){isEqual();result.innerHTML += "^"}function psqrt(){isEqual();var r = result.innerHTML;var c = r.charAt(r.length - 1);if ("0" <= c && c <= "9" || c == "%"){po("×");}result.innerHTML += "√";}function c(){result.innerHTML = "";}function backspace(){var r = result.innerHTML;result.innerHTML = r.substr(0,r.length - 1);isEqual();}function equals1(){equal = true;var r = result.innerHTML;//将特殊字符进行替换r = r.replace(/×/g,"*");r = r.replace(/÷/g,"/");r = r.replace(/%/g,"*0.01");try{ r = pow(r); r = sqrt(r);result.innerHTML=eval(r);}catch(e){result.innerHTML="表达式不正确";}}function pow(r){var arr = r.split("^");if (arr.length == 1){return r;}var leftstr = leftOperation(arr[0]);var rightstr = rightOperation(arr[1]);var num = "Math.pow(" + leftstr + "," + rightstr + ")";var leftr = arr[0].substring(0,arr[0].length - leftstr.length);var rightr = arr[1].substring(rightstr.length,arr[1].length);var r = leftr + num + rightr;return pow(r);}function sqrt(r){if (r.indexOf("√") == -1){return r;}var arr = r.split("√");var rightstr = rightOperation(arr[1]);var num = "Math.sqrt(" + rightstr + ")";var leftr = arr[0];var rightr = arr[1].substring(rightstr.length,arr[1].length);var r =leftr + num + rightr;return sqrt(r);}function leftOperation(r){var leftBracket = 0;var rightBracket = 0;var i;for (i = r.length - 1; i >=0; i--){var c = r.charAt(i);if (c == ")"){rightBracket++;} else if (leftBracket == rightBracket && c >="0" && c <= "9"){break;} else if (c == "("){leftBracket++;}}return r.substring(i);}function rightOperation(r){var leftBracket = 0;var rightBracket = 0;var i;for (i = 0; i < r.length; i++){var c = r.charAt(i);if (c == "("){leftBracket++;} else if (leftBracket == rightBracket && c >="0" && c <= "9"){break;} else if (c == ")"){rightBracket++;}}return r.substring(0,i+1);}
本文链接地址:https://www.jiuchutong.com/zhishi/298595.html 转载请保留说明!

上一篇:threeJs入门 js引入(threejs怎么用)

下一篇:C罗老矣,我的程序人生还有多远(c罗my eyes never lie)

  • 苹果12怎么识别图片文字(苹果12怎么识别抖音歌曲)

    苹果12怎么识别图片文字(苹果12怎么识别抖音歌曲)

  • 荣耀play4pro闪存规格是多少呢(荣耀play的闪存)

    荣耀play4pro闪存规格是多少呢(荣耀play的闪存)

  • 快手怎么取消差评呢(快手取消怎么取)

    快手怎么取消差评呢(快手取消怎么取)

  • iphonex面部识别一直显示高一点,低一点(iphonex面部识别设置不了如何解决)

    iphonex面部识别一直显示高一点,低一点(iphonex面部识别设置不了如何解决)

  • mate30pro隔空手势没反应

    mate30pro隔空手势没反应

  • 手机90hz和60刷新率有什么区别(手机屏幕刷新60和90有什么区别)

    手机90hz和60刷新率有什么区别(手机屏幕刷新60和90有什么区别)

  • ios13.5什么时候更新(ios13.5什么时候更新推送)

    ios13.5什么时候更新(ios13.5什么时候更新推送)

  • 苹果手机右上角发烫是怎么回事呀(苹果手机右上角有个麦克风怎么关闭)

    苹果手机右上角发烫是怎么回事呀(苹果手机右上角有个麦克风怎么关闭)

  • 腾讯会员登录失败2005(腾讯会员登录失败110509)

    腾讯会员登录失败2005(腾讯会员登录失败110509)

  • 手机qq如何显示正在听的音乐(手机qq如何显示离线状态)

    手机qq如何显示正在听的音乐(手机qq如何显示离线状态)

  • 微信申请的健康码可以取消吗(微信申请的健康码全国通用吗)

    微信申请的健康码可以取消吗(微信申请的健康码全国通用吗)

  • 抓屏键是什么意思(抓屏幕快捷键)

    抓屏键是什么意思(抓屏幕快捷键)

  • 笔记本以太网网络电缆被拔出什么意思(笔记本以太网网络电缆未连接)

    笔记本以太网网络电缆被拔出什么意思(笔记本以太网网络电缆未连接)

  • qq群相册谁都能删除吗(qq群相册是群内所有人都能看到吗)

    qq群相册谁都能删除吗(qq群相册是群内所有人都能看到吗)

  • 微信解封后多久可以发朋友圈(微信解封后多久恢复正常)

    微信解封后多久可以发朋友圈(微信解封后多久恢复正常)

  • 华为手机开发人员选项在哪里打开(华为手机开发人员选项怎么打开和关闭)

    华为手机开发人员选项在哪里打开(华为手机开发人员选项怎么打开和关闭)

  • 网页如何改变字行间距(网页怎么改字体)

    网页如何改变字行间距(网页怎么改字体)

  • nova5pro耳机孔在哪(nova5z耳机孔)

    nova5pro耳机孔在哪(nova5z耳机孔)

  • 小米9se红外遥控怎么用(小米9se红外遥控怎么设置)

    小米9se红外遥控怎么用(小米9se红外遥控怎么设置)

  • 如何在威客网上接单(怎么在威客网上赚钱)

    如何在威客网上接单(怎么在威客网上赚钱)

  • opp手机hd在哪里关闭(oppo手机hd在哪里打开)

    opp手机hd在哪里关闭(oppo手机hd在哪里打开)

  • VUE3  自定义 轻量级全局数据共享方案之一 Provide&inject (简单快速实现vuex功能)(vuecli怎么使用自定义组件)

    VUE3 自定义 轻量级全局数据共享方案之一 Provide&inject (简单快速实现vuex功能)(vuecli怎么使用自定义组件)

  • 帝国cms6.6注册欢迎邮件发送的方法是什么(帝国cms登录)

    帝国cms6.6注册欢迎邮件发送的方法是什么(帝国cms登录)

  • 出口企业税负率计算公式
  • 对公转账房租怎么备注
  • 资产负债表库存为负数怎么调整
  • 税务局核定税种是什么意思
  • 留抵税额账上比申报表多280
  • 消费卡预付卡能入账吗
  • 企业年金也需要缴纳吗
  • 外企缴纳社保
  • 物流公司 报关
  • 非独立核算的公司怎么报税
  • 劳务报酬个人所得税怎么计算
  • 开具发票有哪些特殊规定?
  • 物业公司代收暖气费如何开票
  • 工会发放慰问品总金额超过多少需要比价
  • 企业短期投资的计划和管理过程叫做资本预算
  • 为什么贷款利息变高了
  • 允许扣除的土地价款怎么计算例题
  • 社保显示已申报,但缴不了款
  • 机关党建经费提取比例
  • 计提固定资产折旧
  • microsoft edge怎么改成ie11
  • 新版edge浏览器如何恢复设置
  • 如何恢复回收站永久删除的文件
  • 母公司是否应替子公司承担违约责任
  • macbook无限输入z
  • 公司债务转个人债务
  • php string函数
  • php零基础入门教程
  • yolov5结构解析
  • AI - stable-diffusion(AI绘画)的搭建与使用
  • get_module_base
  • 企业资产损失税前扣除管理办法最新
  • 客运公司做账怎么做
  • 现金流量表的附表如何编制
  • 所有者权益总计怎么算沙盘
  • 取得经营所得的个人,有综合所得的是什么意思
  • phpcms模板制作教程
  • python如何点击网页按钮
  • sql 覆盖索引
  • mysql主键和索引
  • 房地产企业建成后先出租的房地产
  • 上年多交的增值税怎么调整
  • 长期股权投资中同一控制和非同一控制的区别
  • 专用发票不抵扣联可以当普票用吗?
  • 税控盘抄报税逾期怎么办
  • 待抵扣进项税额和待认证进项税额的区别
  • 残保金超比例奖励政策
  • 塔吊租赁和购买的区别
  • 非流动性资产有
  • 公务机票保险费能报销吗
  • 企业利润率如何计算公式
  • 公司卖掉软件计入成本吗
  • 内账税费计入什么科目
  • 企业没有期初数据,会计怎么做账
  • win7系统环境变量无法编辑怎么办
  • win8更新win8.1
  • 苹果电脑怎么截屏按哪个键
  • cgi linux
  • win7本地磁盘图标变了
  • centos6可用yum源
  • win10更新已经下载好了能删除吗
  • 电脑双系统删除一个系统的步骤
  • unity 读取xml文件
  • python计算两日期间隔月份
  • Unity3D脚本对预制件无效
  • nodejs文件操作
  • 文本框css关闭输入框
  • ssh自动输入密码登录
  • shell字符串比较相等
  • Facebook推出强大Android图片库Fresco 自动释放内存 图片缓存 内存益处
  • js鼠标滑动特效
  • onSaveInstanceState和onRestoreInstanceState触发的时机
  • jquery attribute
  • python程序开发
  • 电子税务局 安徽
  • 保险公司代收2.8万
  • 新办企业税务局注册流程
  • 美国买房hoa
  • 姓名验证不正确
  • 福建地税网上办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设