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 相关文章推荐
js获取变量
Aug 24 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python实现简单状态框架的方法
2015/03/19 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python列表如何更新值
2020/05/27 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
行政助理的职责
2013/11/14 职场文书
党员领导干部承诺书
2014/05/28 职场文书
消防安全宣传标语
2014/06/07 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
整改报告怎么写
2014/11/06 职场文书
2015年度女工工作总结
2015/10/22 职场文书
师德培训心得体会2016
2016/01/09 职场文书
Python基础之元编程知识总结
2021/05/23 Python
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS