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 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
12 种使用Vue 的最佳做法
Mar 30 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代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
node.js中cluster的使用教程
2017/06/09 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
安全资料员岗位职责
2013/12/14 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
门诊手术室工作制度
2014/01/30 职场文书
怎么写工作检讨书
2014/11/16 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python 用递归实现通用爬虫解析器
2021/04/16 Python
python3.9之你应该知道的新特性详解
2021/04/29 Python
深入解析MySQL索引数据结构
2021/10/16 MySQL