位置: 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)

  • c语言do while语句(c语言do while语句错误描述的是)

    c语言do while语句(c语言do while语句错误描述的是)

  • 微信加黑怎么解除(微信加黑了)

    微信加黑怎么解除(微信加黑了)

  • 小米电视遥控器无反应怎么办(小米电视遥控器坏了怎么控制电视)

    小米电视遥控器无反应怎么办(小米电视遥控器坏了怎么控制电视)

  • x轴y轴是什么意思(x轴和y轴代表的是什么方向)

    x轴y轴是什么意思(x轴和y轴代表的是什么方向)

  • vivoz1是什么屏幕(vivoz1i是什么屏幕)

    vivoz1是什么屏幕(vivoz1i是什么屏幕)

  • 华为充不进电红灯闪烁(华为充不进电红绿灯闪烁)

    华为充不进电红灯闪烁(华为充不进电红绿灯闪烁)

  • eisclient已停止工作怎么解决(epevenue_sh.exe已停止工作)

    eisclient已停止工作怎么解决(epevenue_sh.exe已停止工作)

  • 曲面显示器更伤眼睛吗(曲面显示器爱坏吗)

    曲面显示器更伤眼睛吗(曲面显示器爱坏吗)

  • 钉钉考勤已读什么意思(钉钉考勤记录显示已读)

    钉钉考勤已读什么意思(钉钉考勤记录显示已读)

  • 不是计算机的存储设备的是(不是计算机的存储单位)

    不是计算机的存储设备的是(不是计算机的存储单位)

  • 苹果手机为啥下载不了微信(苹果手机为啥下载不了抖音)

    苹果手机为啥下载不了微信(苹果手机为啥下载不了抖音)

  • 安卓root是什么意思(安卓root的好处和坏处)

    安卓root是什么意思(安卓root的好处和坏处)

  • 京东激活了win怎么退货(京东电脑已经激活系统能退吗)

    京东激活了win怎么退货(京东电脑已经激活系统能退吗)

  • 极速退款是什么(极速退款是什么意思,包括运费险吗?)

    极速退款是什么(极速退款是什么意思,包括运费险吗?)

  • 怎么查别人微信记录(怎么查别人微信经常和谁聊天)

    怎么查别人微信记录(怎么查别人微信经常和谁聊天)

  • vivo智慧场景怎么关闭(vivo手机的智慧场景怎么讲解演示)

    vivo智慧场景怎么关闭(vivo手机的智慧场景怎么讲解演示)

  • 华为mate30微信视频美颜怎么设置

    华为mate30微信视频美颜怎么设置

  • pdsch信道是干嘛的(pdcch信道)

    pdsch信道是干嘛的(pdcch信道)

  • 通讯助力漏话提醒是什么意思(通讯助理漏话提醒怎么取消打不通)

    通讯助力漏话提醒是什么意思(通讯助理漏话提醒怎么取消打不通)

  • 苹果充电插口叫什么(苹果充电插口叫什么名称)

    苹果充电插口叫什么(苹果充电插口叫什么名称)

  • 为什么淘宝新人红包用不了(为什么淘宝新人免费没有了)

    为什么淘宝新人红包用不了(为什么淘宝新人免费没有了)

  • xr卡机了怎么弄(xr卡死了咋办)

    xr卡机了怎么弄(xr卡死了咋办)

  • 小爱同学无法回应(小爱同学不回复没反应)

    小爱同学无法回应(小爱同学不回复没反应)

  • 央视影音怎么激活大王卡(央视影音怎么在电视上看)

    央视影音怎么激活大王卡(央视影音怎么在电视上看)

  • 荣耀20耳机插哪里(荣耀20耳机在哪里插)

    荣耀20耳机插哪里(荣耀20耳机在哪里插)

  • 苹果系统更新一直转圈(苹果系统更新一半能取消吗)

    苹果系统更新一直转圈(苹果系统更新一半能取消吗)

  • apk命令  下载包管理工具(apk文件包下载)

    apk命令 下载包管理工具(apk文件包下载)

  • ps分辨率如何理解(ps中分辨率)

    ps分辨率如何理解(ps中分辨率)

  • Java 中九种 Map 的遍历方式,你一般用的是哪种呢?(java中map.entry)

    Java 中九种 Map 的遍历方式,你一般用的是哪种呢?(java中map.entry)

  • 增值税进项税会计处理
  • 建筑劳务发票是全额抵扣吗
  • 二手车没有发票能过户吗
  • 2021年9月个税申报截止时间
  • 普通发票作废怎么验旧
  • 物业公司哪些费用需要公示
  • 房地产预售房收入如何缴纳增值税
  • 职工食堂的费用怎么入账
  • 如何下载金三系统的客户端插件?
  • 什么凭证需要审计报告
  • 通讯费补贴要交税吗
  • 一般个体户核定税率多少
  • 外账不能出现收据
  • 公司买厨房用品计入什么科目
  • 小规模纳税人销售自己使用过的物品
  • 营业外支出是否需要发票
  • 待认证进项税额借贷方向
  • qdcsfs.exe - qdcsfs是什么进程 有何作用
  • mac清理垃圾怎么清理
  • 收到汇票结余会怎么样
  • 企业为员工缴纳社保标准及流程
  • 琼斯的大海怪
  • php延迟静态绑定
  • 防伪税控服务费怎么交
  • 元宇宙产业链
  • 自然人税收系统换电脑怎么同步数据
  • 投资中间人要担什么责任
  • php结果以什么形式返回
  • 企业所得税利息费用的扣除标准
  • python中 =是什么意思
  • 职工食堂资金管理办法
  • 工伤保险赔付计算
  • 进项税额转出会计分录
  • 车间用的液化气计入什么科目
  • 以前年度进项转出账务处理
  • 办理对公账户时间
  • 控股子公司注销母公司账务处理实例
  • 纳税检查企业多缴企业所得税如何处理
  • 油卡办理需要多久?
  • 差旅费出差补助标准
  • 公司代扣代缴社保什么意思
  • 本年利润每个月需要结转吗
  • 无票销售纳税后怎么处理
  • 有限合伙企业应纳税所得额的计算
  • 股权投资业务是什么意思
  • 核定征收小规模做汇算清缴吗
  • 企业备用金怎么做账
  • mysql导出查询结果sql
  • 怎样修改注册表关闭win11系统杀毒软件
  • win7无法识别usb设备如何解决
  • XP系统提示QQprotect.exe损坏文件的解决方法图文教程
  • linux系统中的一切都归结为
  • fedora使用
  • centos6.2安装教程
  • centos桌面调出命令行
  • centos禁用root
  • softmangerlite.exe是什么进程 有什么用
  • linux 操作系统
  • win7进运行
  • win7 设置
  • win7系统命令大全
  • win10打开蓝屏怎么解决
  • perl调试
  • codeblocks配置文件在哪
  • vue前端后端
  • javascript新手教程
  • python里的迭代器
  • 使用筷子就餐会不会传染乙肝病毒
  • 解决问题
  • js日历控件代码和效果
  • 安卓中textview
  • js获取浏览器的cookie
  • Android音乐播放器评论功能怎么实现
  • python如何自动化
  • 打印个人住房信息查询记录需要什么资料
  • 四川税务申报如何网上申报零申报
  • 超市开发票每月额度,超了之后税率是多少
  • 固定资产原值包括哪些
  • 宁波个人税务查询网
  • 贵州地税电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设