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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- extjs中treepanel属性和方法
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- html markdown 超链接对比(html+js 实现markdown编辑器效果)
- jquery遍历json字符串
- 用js做一个计算器(使用JS实现简易计算器)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- js轮播图片(JS实现简单图片轮播效果)
- js复制内容到剪贴板
- php多维数组怎么转换json(php实现的数组转xml案例分析)
- 通过js获取Url的参数值
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- Js操作cookie
- js原型链的理解(浅谈JS的原型和原型链)
- nodejsweb服务(Nodejs实现内网穿透服务)
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- 《满江红》不要只当电影看,学生应该这样做(满江红不要只当电影看)
- 电影《民间怪谈录之走阴人》定档8月5日,开启一场中式惊悚之旅(电影民间怪谈录之走阴人定档8月5日)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
热门推荐
- navicat如何连接服务器的数据库(Navicat如何远程连接云服务器数据库)
- python自己做个定时器(对python周期性定时器的示例详解)
- laravel 用户登录认证(Laravel5.5 实现后台管理登录的方法自定义用户表登录)
- dedecms文章怎么发(批量替换织梦DedeCMS所有文章来源和作者的方法)
- $(document).ready和window.onload的区别
- mstsc远程桌面不成功(远程桌面连接命令mstsc怎么用)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- ubuntu20.04安装启动问题(安装ubuntu18.04报:failed to load ldlinux.c32的问题及解决步骤)
- python numpy数组拼接(Python快速转换numpy数组中Nan和Inf的方法实例说明)
- sublime text 快捷键