当前位置: 首页 > 编程笔记 >

JavaScript实现简易计算器小功能

左丘繁
2023-03-14
本文向大家介绍JavaScript实现简易计算器小功能,包括了JavaScript实现简易计算器小功能的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了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>

运行效果:

测试结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue实现简易计算器功能,包括了vue实现简易计算器功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现简易计算器的具体代码,供大家参考,具体内容如下 功能介绍 1、可以实现加减乘除 2、可以实现归零 3、实现退格 效果图一般般,样式随便写的,主要看功能以及实现方法 代码加解释 1、HTML部分 首先布局,把要做的样子写出来,为每一个按键绑定一个点击事件 2、

  • 本文向大家介绍Javascript实现简易天数计算器,包括了Javascript实现简易天数计算器的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下 效果图: 功能: 1. 支持选择日期; 2. 自动计算闰年; 3. 支持使用当前日期。 代码: (1)html文件: (2)外部js文件: 以上就是本文的全部内容,

  • 本文向大家介绍javascript实现简易计算器的代码,包括了javascript实现简易计算器的代码的使用技巧和注意事项,需要的朋友参考一下 今天闲来无聊,想写点什么,突然想到用javascript写一个计算器。程序还存在很多的Bug,先在这里记录一下,以后慢慢更正。 代码如下: 以上这篇javascript实现简易计算器的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多

  • 本文向大家介绍JS实现简易计算器,包括了JS实现简易计算器的使用技巧和注意事项,需要的朋友参考一下 用JS实现简易计算器,供大家参考,具体内容如下 首先创建结构和样式 然后添加Java script 代码的优化: 循环实现绑定 给一个外部接口,用于新增运算 这样就圆满完成咯 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Vue实现简易计算器,包括了Vue实现简易计算器的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue实现简易计算器的具体代码,供大家参考,具体内容如下 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于javascript实现简单计算器功能,包括了基于javascript实现简单计算器功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 实现代码: 希望本文所述对大家学习javascript程序设计有所帮助。