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

  • 魅族18x有nfc吗(魅族18xnfc功能在哪里)

    魅族18x有nfc吗(魅族18xnfc功能在哪里)

  • 如何查微信聊天记录(如何查微信聊天记录条数)

    如何查微信聊天记录(如何查微信聊天记录条数)

  • 苹果6sp屏幕尺寸多大(苹果6sp屏幕尺寸多长)

    苹果6sp屏幕尺寸多大(苹果6sp屏幕尺寸多长)

  • 候补以后还能抢票吗(候补购票后还能抢当天其他车的票吗)

    候补以后还能抢票吗(候补购票后还能抢当天其他车的票吗)

  • 微信转完账删除好友对方能收到钱吗(微信转完账删除好友没领取咋办)

    微信转完账删除好友对方能收到钱吗(微信转完账删除好友没领取咋办)

  • 淘宝是几天自动确认收货(淘宝几天自动评价)

    淘宝是几天自动确认收货(淘宝几天自动评价)

  • 淘宝站外推广渠道有哪些(淘宝站外推广渠道有哪些类型)

    淘宝站外推广渠道有哪些(淘宝站外推广渠道有哪些类型)

  • 怎么设置文字对齐字符网格,每行38个字符数(怎么设置文字对话框)

    怎么设置文字对齐字符网格,每行38个字符数(怎么设置文字对话框)

  • 华为bkl-al00是什么型号手机(华为 bkl-al00)

    华为bkl-al00是什么型号手机(华为 bkl-al00)

  • 如何关闭勿扰模式(如何关闭勿扰模式苹果11)

    如何关闭勿扰模式(如何关闭勿扰模式苹果11)

  • 视频倍速卡顿怎么回事(视频倍速卡顿怎么办)

    视频倍速卡顿怎么回事(视频倍速卡顿怎么办)

  • olcd烧屏是什么意思(oled烧屏是什么意思)

    olcd烧屏是什么意思(oled烧屏是什么意思)

  • 小米wifi放大器怎么重置(小米wifi放大器重新配对)

    小米wifi放大器怎么重置(小米wifi放大器重新配对)

  • wpsword怎么搜索关键字(wpsword怎么搜索多个关键词)

    wpsword怎么搜索关键字(wpsword怎么搜索多个关键词)

  • 爱奇艺注销要多久(爱奇艺注销要多长时间)

    爱奇艺注销要多久(爱奇艺注销要多长时间)

  • 哈希算法原理和用途(哈希算法的优缺点)

    哈希算法原理和用途(哈希算法的优缺点)

  • 什么协议是提供不可靠的数据传输的(什么协议是提供无面向链接,确保路由的正确选择)

    什么协议是提供不可靠的数据传输的(什么协议是提供无面向链接,确保路由的正确选择)

  • 淘宝店铺升一钻至少要多少个好评(淘宝店铺升钻要多久)

    淘宝店铺升一钻至少要多少个好评(淘宝店铺升钻要多久)

  • 苹果蓝牙耳机怎么关机(苹果蓝牙耳机怎么使用)

    苹果蓝牙耳机怎么关机(苹果蓝牙耳机怎么使用)

  • 数据类型转换(数据类型转换分为哪两种)

    数据类型转换(数据类型转换分为哪两种)

  • 淘宝怎么撤销投诉(淘宝怎么撤销投诉商家 手机淘宝举报投诉)

    淘宝怎么撤销投诉(淘宝怎么撤销投诉商家 手机淘宝举报投诉)

  • Win10桌面窗口管理器占用大量CPU的解决办法?(win10桌面窗口管理器gpu占用高)

    Win10桌面窗口管理器占用大量CPU的解决办法?(win10桌面窗口管理器gpu占用高)

  • 暴利税怎么计算
  • 小规模纳税人税控系统
  • 注册分公司独立核算和非独立核算的区别
  • 从企业分红所得税怎么算
  • 税金及附加和应交税费的关系
  • 什么是资本性支出和支出
  • 一般纳税人增值税申报操作流程
  • 公司销售家电并购案例
  • 其他货币资金包括
  • 出口收入没有及时申报怎么处罚
  • 设备安装成本如何核算
  • 不动产分割的法律规定
  • 2019招标费用收取标准
  • 营改增后常用发票报销的种类有哪些呢?
  • 道路施工企业的财务核算包括
  • 以固定资产增资子公司 可以溢价么
  • 预收账款缴税的计算公式
  • 公司购买办公用品计入什么科目
  • 哪些费用可以进项抵扣
  • 买体育彩票收银配比是多少
  • 销售货物并运输增值税
  • 住宅租给公司需要注意什么
  • 小微企业企业税率表
  • 房产赠与流程是什么意思
  • 关于城建税教育费附加地方教育附加的计算
  • 应对税务检查工作总结
  • 小微企业增值税税率
  • 主营业务收入多计跨年调整
  • windows打开文件
  • deepin切换系统
  • 事业单位服务收入怎么做账
  • 补助是按基本工资还是总工资
  • 如何用home
  • 总公司人员的工资子公司可以发吗
  • 电梯安装包工头赚多少
  • 单位话费谁负责交
  • 小本票防伪
  • php数组函数实现机选双色球
  • PHP:pg_lo_import()的用法_PostgreSQL函数
  • 应交所得税和所得税费用的区别计算公式
  • 完美解决战网已休眠正在唤醒它
  • 政府会计制度应付职工薪酬账务处理
  • 员工旅游费的税率是多少
  • CSDN接入AIGC辅助创作,对此你怎么看?
  • 低值易耗品费用计入什么科目
  • 已勾选确认的发票忘记填写怎么办
  • 基本生产成本和辅助生产成本区别
  • python 函数 global
  • 现金日记账一般采用什么格式
  • 小企业会计准则调整以前年度费用分录
  • mysql命令行实用程序
  • 利润表中本期金额是什么意思
  • 预付卡的增值税处理
  • 投资收益账户属于所有者权益类吗
  • 所得税申报表营业成本包括哪些
  • 资产已报废折旧怎么算
  • 本年利润的会计分录
  • 无形资产与固定资产一样都会存在实体性贬值
  • 小规模没交税有什么后果
  • solaris newfs
  • Windows Server 2008网络中禁止迅雷下载
  • 重装win7旗舰版系统教程
  • u盘里装pe系统
  • drvceox86.exe
  • windows10更新出错
  • win8怎么更改账户名称
  • unity拖进模型什么也看不到
  • 微信小程序实现烟花
  • javascript标题
  • flask操作mysql数据库
  • js动态改变div内容
  • 抛物线动画演示视频
  • javascript Window及document对象详细整理
  • Python selenium 三种等待方式详解(必会)
  • js如何判断输入输出
  • 个人所得税完税证明网上打印
  • 如何查询车辆购买信息
  • 江西省税务总局官网
  • 奔驰购置税多少钱
  • 国家税务总局绵阳市税务局网站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设