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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- js弹出新窗口被拦截的解决方法
- python操作json格式(详解python 3.6 安装json 模块simplejson)
- javaweb购物车案例(js实现模拟购物商城案例)
- sqlserver字段说明(详解SQL Server 中 JSON_MODIFY 的使用)
- docker前端项目(Docker部署Nuxt.js项目的实现)
- nodejs游戏服务端框架(如何写Node.JS版本小游戏)
- extjs table布局
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- js的showModalDialog的用法
- ASP.NET中XML和JSON互转
- js隐藏显示tr
- lazyload延迟加载有什么影响(利用原生JS实现懒加载lazyLoad的三种方法总结)
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
- 东南亚安全吗(好不好挣钱)
热门推荐
- pyqt5怎么在pycharm中安装(pycharm+PyQt5+python最新开发环境配置踩坑)
- css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
- 访问云服务器磁盘文件路径(云服务器的磁盘要怎么选择?)
- python语句for循环(Python基础之循环语句用法示例for、while循环)
- extjs实现树形下拉框
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- 如何用mysql建立图书管理系统(图书管理系统的sqlserver数据库设计示例)
- 列举服务器网络防御措施(如何对Web服务器进行飓风级防御)
- react性能优化是哪个周期(React 并发功能体验前端的并发模式)
- python scrapy爬虫教程视频(详解python3 + Scrapy爬虫学习之创建项目)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9