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时间日期处理
- MVC JsonResult的用法
- JSON中的特殊字符
- js柯里函数的应用场景(深入详解JS函数的柯里化)
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- extjs中Toolbar工具栏
- tomcat服务如何在eclipse中配置(HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解)
- chrome调试js
- thinkphp框架实例(ThinkPHP框架整合微信支付之JSAPI模式图文详解)
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- python编写程序读写数据库(详解js文件通过python访问数据库方法)
- js中encodeURIComponent与C#中HttpUtility.UrlEncode
- qt和js相互调用(QT与javascript交互数据的实现)
- python获取json结果保存文本(Python JSON格式数据的提取和保存的实现)
- javascript中还原append代码(JS实现jQuery的append功能)
- 怎么用织梦上传源码(如何把织梦dedecms数据生成json)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
- 成都轨道交通19号线二期全线电通(成都轨道交通19号线二期全线电通)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
热门推荐
- 用docker搭建redis集群(docker实现redis集群搭建的方法步骤)
- laravel接口请求模拟(Laravel 类和接口注入相关的代码)
- python中统计一个字符出现的次数(Python统计一个字符串中每个字符出现了多少次的方法字符串转换为列表再统计)
- HttpWebResponse.StatusCode请求状态代码
- 块级元素水平垂直居中
- docker配置文件详解(Docker中搭建FastDFS文件系统多图教程)
- php怎么实现动态配置(php实现映射操作实例详解)
- iis7如何使用(IIS7的应用程序池详细解析)
- python中比较同一字典value(在Python 字典中一键对应多个值的实例)
- php返回数组值最大的键(PHP实现通过二维数组键值获取一维键名操作示例)