JavaScript实现简易计算器小功能


Posted in Javascript onOctober 22, 2020

本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
</head>
<body>
<!--页面布局-->
<input type="text" id="num1" placeholder="请输入第一个数字"/>
<input type="text" id="operator" placeholder="请输入运算符">
<input type="text" id="num2" placeholder="请输入第二个数字"/>
<input type="button" onclick="count()" value="计算"/><br/>
<span>计算结果:</span><span id="result"></span>
 
<!--JavaScript-->
<script>
  function count() {
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var operator = document.getElementById("operator").value;
    var num = "";
    //判断输入的两个数字是否为数字,如果为数字,返回结果为false
    var num1 = parseFloat(num1);
    var num2 = parseFloat(num2);
    var isNotNumber = isNaN(num1) || isNaN(num2);
    if (!isNotNumber) {
      switch (operator) {
        case "+":
          num = num1 + num2;
          break;
        case "-":
          num = num1 - num2;
          break;
        case "*":
          num = num1 * num2;
          break;
        case "/":
          if (num2 == 0) {
            // 除数不能为0
            alert("除数不能为0");
          } else {
            num = num1 / num2;
            break;
          }
        default:
          alert("请输入正确的运算符!!!");
      }
      num = num.toFixed(2);
      document.getElementById("result").innerText = num;
    } else {
      alert("请输入数字!!!")
    }
  }
</script>
</body>
</html>

运行效果:

JavaScript实现简易计算器小功能

测试结果:

JavaScript实现简易计算器小功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Vue实现简易计算器
Feb 25 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
vue实现简单加法计算器
Oct 22 #Javascript
微信小程序实现选项卡滑动切换
Oct 22 #Javascript
微信小程序实现文件预览
Oct 22 #Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 #Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 #Javascript
vue实现下拉菜单树
Oct 22 #Javascript
Javascript柯里化实现原理及作用解析
Oct 22 #Javascript
You might like
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python3解释器知识点总结
2019/02/19 Python
python生成器推导式用法简单示例
2019/10/08 Python
python列表推导式操作解析
2019/11/26 Python
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
园艺师求职信
2014/03/10 职场文书
学习十八大演讲稿
2014/09/15 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python