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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php实现jQuery扩展函数
2009/10/30 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
javascript实现动态标签云
2015/10/16 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
常用的js方法合集
2017/03/10 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
react native与webview通信的示例代码
2017/09/25 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
初中毕业典礼演讲稿
2014/09/09 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python