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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 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
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
微信小程序动态增加按钮组件
2018/09/14 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
接待员岗位责任制
2014/02/10 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
运动会方阵口号
2014/06/07 职场文书
动物科学专业求职信
2014/07/27 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS