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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 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 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
js中eval详解
2012/03/30 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Django实现分页功能
2018/07/02 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
pytorch 修改预训练model实例
2020/01/18 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
final, finally, finalize的区别
2012/03/01 面试题
财务出纳员岗位职责
2013/11/26 职场文书
财务内勤岗位职责
2014/04/17 职场文书
公司建议书怎么写
2014/05/15 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
群众路线对照检查材料
2014/09/22 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
nginx配置指令之server_name的具体使用
2022/08/14 Servers