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

  • 不再烧钱 细节入微也能提高搜索推广营销效果

    不再烧钱 细节入微也能提高搜索推广营销效果

  • b站哪里看自己点赞过的视频(b站哪里看自己的点赞)

    b站哪里看自己点赞过的视频(b站哪里看自己的点赞)

  • 钉钉怎么上课(钉钉怎么上课放ppt)

    钉钉怎么上课(钉钉怎么上课放ppt)

  • web服务器访问人数超过上限(服务器web访问日志如何查看)

    web服务器访问人数超过上限(服务器web访问日志如何查看)

  • 怎么看微信被别人删了没有(怎么看微信被别人拉黑名单)

    怎么看微信被别人删了没有(怎么看微信被别人拉黑名单)

  • 苹果x导航老是gps信号弱怎么办(苹果x导航老是显示gps信号弱)

    苹果x导航老是gps信号弱怎么办(苹果x导航老是显示gps信号弱)

  • QQ在线状态TiMi中是什么意思(qq在线状态timi中好友在线吗)

    QQ在线状态TiMi中是什么意思(qq在线状态timi中好友在线吗)

  • 华为畅想p9plus怎么录屏(华为畅享9 plus如何)

    华为畅想p9plus怎么录屏(华为畅享9 plus如何)

  • 多张照片怎么在一张上面(多张照片怎么在ppt一张一张飞)

    多张照片怎么在一张上面(多张照片怎么在ppt一张一张飞)

  • p40和v30区别(p40和v30哪个好)

    p40和v30区别(p40和v30哪个好)

  • 把苹果id账号和密码给别人会怎样(把苹果id账号和密码能看相册吗)

    把苹果id账号和密码给别人会怎样(把苹果id账号和密码能看相册吗)

  • 微信视频聊天流量一分钟大概多少(微信视频聊天流量消耗大吗)

    微信视频聊天流量一分钟大概多少(微信视频聊天流量消耗大吗)

  • eclipse的快捷键(eclipse实用常用快捷键)

    eclipse的快捷键(eclipse实用常用快捷键)

  • 乘车码可以刷多个人吗(乘车码可以刷多次吗)

    乘车码可以刷多个人吗(乘车码可以刷多次吗)

  • 腾讯视频怎么没有弹幕(腾讯视频怎么没有下载标志)

    腾讯视频怎么没有弹幕(腾讯视频怎么没有下载标志)

  • gif怎么保存本地相册(gif怎么保存成jpg)

    gif怎么保存本地相册(gif怎么保存成jpg)

  • n6蓝牙音箱怎样调节音量(ndz03ga蓝牙音响使用方法)

    n6蓝牙音箱怎样调节音量(ndz03ga蓝牙音响使用方法)

  • 探探怎么解除包月(探探如何取消)

    探探怎么解除包月(探探如何取消)

  • 如何关闭手机扬声器(如何关闭手机扬声器模式vivo)

    如何关闭手机扬声器(如何关闭手机扬声器模式vivo)

  • 小米屏蔽的相册去哪里找(小米屏蔽的相册怎么看)

    小米屏蔽的相册去哪里找(小米屏蔽的相册怎么看)

  • yolox改进--添加Coordinate Attention模块(CVPR2021)(yolo改进方法)

    yolox改进--添加Coordinate Attention模块(CVPR2021)(yolo改进方法)

  • WordPress安装百度统计教程(wordpress怎么安装插件)

    WordPress安装百度统计教程(wordpress怎么安装插件)

  • 配置Webpack Dev Server 实战操作方法步骤(配置windows update)

    配置Webpack Dev Server 实战操作方法步骤(配置windows update)

  • 认缴制股权转让印花税的计税依据是什么
  • 小规模纳税人征税规定
  • 进项税额转出如何申报
  • 目前哪些费用不能加计扣除
  • 冲减收入怎么做账
  • 土地增值税筹划实战
  • 亏损企业能不能无常捐赠
  • 未分配利润太多说明什么
  • 增值税税收返还资料
  • 预付的账款属于
  • 处理固定资产需要交企业所得税吗
  • 民办非企业单位是私立还是公立
  • 在产品,产成品和库存商品的区别
  • 三证合一后怎么看税号
  • 产品售后产生材料费会计核算
  • 财产转移数据缴费怎么交
  • 员工离职补偿金可以税前扣除吗
  • 出口加工区内企业不能从事的业务有
  • cpu风扇应该怎么调
  • 银行收到退款怎么回复
  • 收到发票未抵扣谁开红字
  • 布里斯托尔景点
  • 固定资产加速折旧方法
  • thinkphp批量修改
  • 土地增值税清算扣除项目
  • 董事会会费应计什么科目
  • 预收账款期末余额怎么算
  • 厂房改造支出可以计入厂房价值吗
  • html5简单吗
  • web用户管理系统报告
  • 数据挖掘快速入门
  • 深入全面剖析自己
  • php对象是什么类型的数据
  • 休产假期间社保个人部分怎么办
  • 银行代发工资当天改工资卡来得及吗
  • 建筑施工企业收入怎么确认
  • python time. time
  • mysql有几种
  • 投资款未备注
  • 服装类发票可以抵扣哪些
  • 个税年度汇算清缴总结
  • 发票收款人和复核人在哪儿政
  • 个体定期定额怎么征税
  • 个税申报工资比实发工资高
  • 开票方没有缴纳增值税
  • 已抵扣的增值税怎么做账
  • 可抵扣的税票
  • 红字申请单能作废吗
  • 发票对方没有上传,无法勾选发票要怎么办
  • 律师事务所如何成立
  • 航空公司变更起飞时间赔偿
  • 房地产开发企业资质管理规定
  • 查询一个字段有哪些值
  • 恢复mysql数据库
  • iis怎么用
  • 新装的ubuntu18没有网络
  • bios设置网卡开启
  • 去掉快捷功能
  • win10用浏览器
  • mac电脑系统安装
  • WNxp下让所有用户桌面显示系统默认图标的方法
  • 为什么win7系统盘会自动满
  • win8.1怎么优化才流畅
  • win7怎么自启动程序
  • win7系统安装软件乱码
  • 如何优化资本结构
  • javascript entries
  • js怎么理解
  • nodejs创建vue
  • nodejs函数返回值
  • jquery怎么判断复选框选中
  • jquery的checked
  • IE8 新增的Javascript 开发接口说明
  • 江苏增值税发票代码
  • 企业所得税申报表怎么填写
  • 转让专利权取得的所得属于财产转让所得吗
  • 网上怎么开电子一票通
  • 国税局江西省税务局
  • 广东地方税务局领导班子名单
  • 公司以融资租赁形式从事非法放贷业务,,能否让法院判
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设