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里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue keep-alive的简单总结
Jan 25 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
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
jQuery中:not选择器用法实例
2014/12/30 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
面包屑导航详解
2017/12/07 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python动态加载变量示例分享
2014/02/17 Python
浅析Python中signal包的使用
2015/11/13 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
在Python中COM口的调用方法
2019/07/03 Python
python实现数据分析与建模
2019/07/11 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
销售总监岗位职责
2014/01/04 职场文书
医学生个人求职信范文
2014/02/07 职场文书
医院工作检讨书范文
2014/02/10 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2014年新生军训方案
2014/05/01 职场文书
工程承包协议书
2014/10/20 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Promise静态四兄弟实现示例详解
2022/07/07 Javascript