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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
原生js实现碰撞检测
Mar 12 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js 单引号 传递方法
2009/06/22 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
理解JS事件循环
2016/01/07 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python如何获取文件指定行的内容
2020/05/27 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Python实现简单的2048小游戏
2021/03/01 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
“学雷锋活动月”总结
2014/03/09 职场文书
创先争优公开承诺书
2014/08/30 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
报案材料怎么写
2015/05/25 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL