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 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
网络安全类面试题
2015/08/01 面试题
财务人员个人求职信范文
2013/12/04 职场文书
大学生党课思想汇报
2013/12/29 职场文书
情况说明书格式范文
2014/05/06 职场文书
综艺节目策划方案
2014/06/13 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
如何判断pytorch是否支持GPU加速
2021/06/01 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android