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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
微信小程序实现工作时间段选择
Feb 15 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
php解决约瑟夫环示例
2014/04/09 PHP
8个PHP数组面试题
2015/06/23 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python实现登陆文件验证方法
2018/10/06 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
方正Java笔试题
2014/07/03 面试题
2014公司党员自我评价范文
2014/09/11 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
学生保证书
2015/01/16 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技