javascript写计算器教程(基于JavaScript实现简易计算器)
类别:编程学习 浏览量:1711
时间:2022-01-20 00:45:59 javascript写计算器教程
基于JavaScript实现简易计算器本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <style> .op { margin: 50px auto; width: 300px; height: 300px; border: 1px solid orange; background-color: lightskyblue; border-radius: 50px; } input { width: 210px; height: 30px; border-radius: 5px; } button { width: 30px; height: 30px; border-radius: 10px; } </style> </head> <body> <li class="op"> <h2 align="center">计算器</h2> <form name="calculator"> <table align="center"> <tr> <td>num1:</td> <td><input type="text" name="num1"></td> </tr> <tr> <td>num2:</td> <td><input type="text" name="num2"></td> </tr> <tr> <td colspan="2">          <button type="button">+</button>        <button type="button">-</button>        <button type="button">*</button>        <button type="button">/</button> </td> </tr> <tr> <td>结果:</td> <td><input type="text" name="result" disabled></td> </tr> </table> </form> </li> <script> //得到标签名下的所有元素对象,返回一个数组 let buttonArr = document.getElementsByTagName("button"); for (let but of buttonArr) { but.addEventListener('click', function () { let operator = this.innerHTML; count(operator); }); } function count(operator) { //得到form为calculator中name为num1的输入值 let num1 = parseFloat(document.calculator.num1.value); let num2 = parseFloat(document.calculator.num2.value); let result = ''; switch (operator) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': if (num2 == 0) { alert("除数不能为零"); return; } result = num1 / num2; break; } //将结果赋值于属性名name为result的input框 document.calculator.result.value = result; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js数组去重复
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- js时间变成日期格式(js日期时间格式化的方法实例)
- js中alert相关知识点(js中getBoundingClientRect 方法案例详解)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- js三级联动列表(基于JavaScript实现年月日三级联动)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- sqlserver技术文档(sql server2016里面的json功能浅析)
- js中arguments的用法
- 禁止鼠标右键的JS代码
- js获取子表单所有数据(JavaScript实现异步提交表单数据)
- node.js怎么使用import(Node.js断点续传的实现)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- js解除网页屏蔽(js检测标题与描述中的关键词发现就替换或跳转到别的页面)
- qt和js相互调用(QT与javascript交互数据的实现)
- js中toFixed() 的使用
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
- 新一小兰领衔 盘点动漫中的那些 远距离恋爱情侣(盘点动漫中的那些)
- 大事件 合肥四中火了(大事件合肥四中火了)
- 翼龙贷组织出借人调研 感受鄱阳 借 来的致富路(翼龙贷组织出借人调研)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
热门推荐
- laravel数据绑定(laravel-admin表单提交隐藏一些数据,回调时获取数据的方法)
- SQLServer清理日志文件方法案例详解(SQLServer清理日志文件方法案例详解)
- mysql流式查询(MySQL全面瓦解之查询的正则匹配详解)
- 数据库该不该用外键
- 什么是mime编码(Mime类型与文件后缀对照表)
- dedecms提示信息(DedeCms fckeditor编辑器空白无法显示的相关问题)
- docker swarm 集群(用Docker swarm快速部署Nebula Graph集群的教程)
- http服务器使用教程(HTTP与HTTP协作的Web服务器访问流程图解)
- pythonsocket教程(python3利用Socket实现通信的方法示例)
- php中isset函数有什么功能(PHP中的empty、isset、isnull的区别与使用实例)