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

  • etc怎么在手机上缴费(etc怎么在手机上查看)

    etc怎么在手机上缴费(etc怎么在手机上查看)

  • 小米打印机怎么连接wifi使用(小米打印机怎么连接wifi)

    小米打印机怎么连接wifi使用(小米打印机怎么连接wifi)

  • 怎么在朋友圈发抖音视频(怎么在朋友圈发长视频呢)

    怎么在朋友圈发抖音视频(怎么在朋友圈发长视频呢)

  • 助听器电池有几种型号(助听器电池几天没电啊)

    助听器电池有几种型号(助听器电池几天没电啊)

  • 两个抖音号可以在一个手机上来回切换吗(两个抖音号可以绑定一个手机号码吗)

    两个抖音号可以在一个手机上来回切换吗(两个抖音号可以绑定一个手机号码吗)

  • ipadA2133和A2124区别(a2133是ipad几)

    ipadA2133和A2124区别(a2133是ipad几)

  • 抖音直播点赞有什么用吗(抖音直播点赞有上限吗每个人)

    抖音直播点赞有什么用吗(抖音直播点赞有上限吗每个人)

  • p40红外线支持吗(华为p40支持红外线)

    p40红外线支持吗(华为p40支持红外线)

  • 在保的苹果手机可以免费换新的吗(在保的苹果手机能买吗)

    在保的苹果手机可以免费换新的吗(在保的苹果手机能买吗)

  • 苹果11什么手机(苹果11什么手机膜好)

    苹果11什么手机(苹果11什么手机膜好)

  • 苹果x基带是高通还是英特尔(苹果x基带有几种)

    苹果x基带是高通还是英特尔(苹果x基带有几种)

  • 苹果a11处理器相当于麒麟多少(苹果a11处理器相当于天机多少)

    苹果a11处理器相当于麒麟多少(苹果a11处理器相当于天机多少)

  • boss账号被锁定了多久才能解封(boss账号被锁定能申诉回来吗)

    boss账号被锁定了多久才能解封(boss账号被锁定能申诉回来吗)

  • xr正面有小闪灯吗(xr正面小闪灯怎么打开)

    xr正面有小闪灯吗(xr正面小闪灯怎么打开)

  • 抖音怎么给别人点赞(抖音怎么给别人发红包)

    抖音怎么给别人点赞(抖音怎么给别人发红包)

  • 移动卡hd怎么取消(移动卡如何关闭hd)

    移动卡hd怎么取消(移动卡如何关闭hd)

  • 抖音注销账号最快几天(抖音注销账号最后的页面是什么)

    抖音注销账号最快几天(抖音注销账号最后的页面是什么)

  • 信号h+是什么意思啊(信号h啥意思)

    信号h+是什么意思啊(信号h啥意思)

  • 华为p40外观尺寸(华为p40外观尺寸多少)

    华为p40外观尺寸(华为p40外观尺寸多少)

  • 小米cc9e支持18瓦快充吗(小米cc9e最高支持多少w)

    小米cc9e支持18瓦快充吗(小米cc9e最高支持多少w)

  • 小爱同学音响不联网能用吗(小爱同学音响不通电怎么弄)

    小爱同学音响不联网能用吗(小爱同学音响不通电怎么弄)

  • 酷狗音乐怎么屏幕显示(酷狗音乐怎么屏蔽广告)

    酷狗音乐怎么屏幕显示(酷狗音乐怎么屏蔽广告)

  • 黑鲨手机怎么隐藏桌面图标(黑鲨手机怎么隐藏相册)

    黑鲨手机怎么隐藏桌面图标(黑鲨手机怎么隐藏相册)

  • 拼多多优惠复活卡在哪(拼多多怎么复活优惠卷)

    拼多多优惠复活卡在哪(拼多多怎么复活优惠卷)

  • 微信号的手机号不用了怎么办(微信号的手机号注销了微信号还能用吗)

    微信号的手机号不用了怎么办(微信号的手机号注销了微信号还能用吗)

  • hdr模式是什么意思(hdr mode)

    hdr模式是什么意思(hdr mode)

  • 17种Vue适用于移动端的ui框架(vue做移动端适配最佳解决方案,亲测有效)

    17种Vue适用于移动端的ui框架(vue做移动端适配最佳解决方案,亲测有效)

  • 如何使用Chrome直接编辑前端代码(chrome使用教程)

    如何使用Chrome直接编辑前端代码(chrome使用教程)

  • 跨年增值税发票怎么冲红
  • 小规模企业所得税多少
  • 我国会计准则规定,会计核算以人民币为记账本位币
  • 税控减免税额如何做分录
  • 非营利组织缴纳社保
  • 软件公司主营业务是什么
  • 无形资产可以一次性摊销吗?
  • 公司收入是否应优先支付工资
  • 企业购买的雇主责任险
  • 土地增值税预征率
  • 不可修复废品损失会计分录
  • 企业所得税汇算清缴补缴税款分录
  • 组织职工捐款取得的现金计入什么会计科目?
  • 转增股 分红
  • 季度末需要结转什么科目
  • 合伙企业出资额不计入实收资本和资本公积 那放哪
  • 增值税抵扣凭证管理
  • 吊车租赁增值税税率最新2022
  • 劳务派遣公司怎么赚钱
  • 个税申报异常怎么办
  • 外国人的纳税人识别号是护照号吗
  • 资产负债中应交税费怎么算
  • win10提示病毒防护已过期
  • SwiftBTN.exe - SwiftBTN是什么进程 有啥作用
  • 应纳税所得税计算公式
  • 专用发票怎样申报
  • unity导出webgl报错
  • wordpress采集教程
  • PHP:iconv_set_encoding()的用法_iconv函数
  • 本部借给分公司的钱用交印花税吗
  • 应付账款挂账会计分录
  • php写文件函数
  • php的中文名
  • oc底层原理
  • 创建数据的命令是
  • mdadm命令用不了
  • 收到退税收入
  • 织梦的首页怎么换图片
  • PostgreSQL教程(二):模式Schema详解
  • mongodb添加环境变量
  • 企业法人个人贷款哪里好贷
  • 增值税主表和附表
  • 税控盘的作用是什么
  • 增值税延期滞纳金计算
  • 现金比率的计算例题
  • etc发票申请流程
  • 政府补贴收入确认政策
  • 银行受理汇票贴现业务
  • 小规模纳税人购进税控收款机
  • 现金日记账的登记证据有
  • 上市公司做会计有什么好处
  • 长期待摊费用如何结转
  • 明细分类账三栏式
  • 公用事业费属于什么会计科目
  • 如何保存xps文件
  • easybcd修复ubuntu
  • Win10 Mobile 14393.321终于修复Lumia636/638导航栏遮挡
  • 系统装在从盘
  • u盘安装win7视频教程
  • automaticupdate
  • win10电脑打开图片文件夹会跳闪
  • 今日推送是什么
  • win xp 内存
  • 实例讲解命局与大运流年作用
  • jquery网页设计
  • socket pf_inet
  • perl 排序
  • javascript闭包函数
  • jquery和css的区别
  • Android Bound Service(二) ----- Using AIDL
  • 简述linux与windows相比,有哪些优势
  • angularjs2
  • jquery one
  • java learning
  • js复制字符串的方法
  • 医保属于地税还是国税
  • 我的宁夏灵活就业缴费失败
  • 北京车位过户手续费多少
  • 地方税务局部门有哪些
  • 民办非营利医院所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设