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+XML 操作
Sep 20 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
J2EE面试题
2016/03/14 面试题
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
个人借款协议书范本
2014/11/17 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL