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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Script的加载方法小结
2011/01/12 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python实现周期方波信号频谱图
2018/07/21 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python用插值法绘制平滑曲线
2021/02/19 Python
关于python多重赋值的小问题
2019/04/17 Python
10个顶级Python实用库推荐
2021/03/04 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
试用期转正后的自我评价
2014/09/21 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL