首页 > 编程语言 >【前端】【JavaScript】简单的加减乘除计算器

【前端】【JavaScript】简单的加减乘除计算器

时间:2022-10-14 11:15:53浏览次数:52  
标签:return num1 num2 JavaScript alert innerText result 计算器 加减乘除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="number1">
<select id="selector">
    <option selected>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
</select>
<input type="text" id="number2">
=
<span id="result"></span>
<input type="button" onclick="calc()" value="计算">
<script>
    function calc(){
        //获取编辑框1.内容
        let num1 = document.getElementById("number1").value;
        //判断是否为空
        if(num1===""){alert("请输入第一个数");return ;}
        //判断是否为数字
        if(isNaN(num1)){alert("请在第一个输入框输入一个数字");return ;}
        //获取编辑框2.内容
        let num2 = document.getElementById("number2").value;
        if(num2===""){alert("请输入第二个数");return ;}
        if(isNaN(num2)){alert("请在第二个输入框输入一个数字");return ;}

        //获取运算符号
        let t = document.getElementById("selector").value;
        //获取第三个编辑框以便计算后显示运算结果
        let result = document.getElementById("result");
        //将字符串转为数字
            try{
                num1 = parseFloat(num1)
                num2 = parseFloat(num2)
            }catch (err){
                alert(err.message)
                return ;
            }
        //当做除法时,除数不能为0
        if(t==="/" && num2===0) {
            alert("除数不能为0")
            return;
        }
        //根据运算符选择相应的计算
        switch (t){
            case '+':
                result.innerText = (num1+num2).toString();
                break;
            case '-':
                result.innerText = (num1-num2).toString();
                break;
            case '*':
                result.innerText = (num1 * num2).toString();
                break;
            case '/':
                result.innerText = (num1 / num2).toString();
                break;
            default:
                result.innerText = "what happen?"
        }
        return result.innerText;
    }
</script>
</body>
</html>

标签:return,num1,num2,JavaScript,alert,innerText,result,计算器,加减乘除
From: https://www.cnblogs.com/mllt/p/web_javascript_jjcc.html

相关文章

  • javascript获取浏览器窗口分辨率|浏览器全屏分辨率|屏幕分辨率
    浏览器窗口分辨率指显示网页的区域,在PC端由于浏览器窗口大小可调节,这个值是可变的。在手机等移动端浏览器窗口大小不可调节,宽度值是固定的,但竖屏和横屏切换会改变。浏览......
  • JavaScript--队列结构
     1.认识队列     2.队列的应用   3.队列类的常见操作    封装一个队列<!DOCTYPEhtml><htmllang="en"><head><metacharset="U......
  • JavaScript--数据结构
     01.为什么使用数组<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>为什么使用数组</title></head><body><script>//保存......
  • 现代JavaScript教程第一部分读书笔记
    现代Javascript教程第一部分读书笔记书籍网址:https://zh.javascript.info/ES6ES6,一种js标准,类似于cpp11这种,目的是规范不同平台下浏览器的行为。usestrict参考https:......
  • JavaScript高级程序设计笔记10 函数Function
    函数1.几种实例化函数对象的方式以函数声明的方式定义函数表达式箭头函数(arrowfunction)使用Function构造函数接收任意多个字符串参数,最后一个参数始终会被......
  • JavaScript 常用 工具类
    /***工具类*2022年7月8日22:52:24*//***空校验null或""都返回true*/exportfunctionisEmpty(obj){if((typeofobj==='string')){......
  • ajax+javascript+tp搜索页面跳转
      搜索页面代码:<formclass="a"action="/news/search.html"method="get"role="form"id="searchform"><divclass="form-group"><inputtype="tex......
  • 【JS】167-JavaScript设计模式——装饰者模式
    四、装饰者模式(DecoratorPattern)1.概念介绍装饰者模式(DecoratorPattern):在不改变原类和继承情况下,动态添加功能到对象中,通过包装一个对象实现一个新的具有原对象相同接口......
  • 【JS】169-JavaScript设计模式——外观模式
    六、外观模式(FacadePattern)1.概念介绍外观模式(FacadePattern) 是一种简单又常见的模式,它为一些复杂的子系统接口提供一个更高级的统一接口,方便对这些子系统的接口访问......
  • 【JS】168-JavaScript设计模式——策略模式
    五、策略模式(StrategyPattern)1.概念介绍策略模式(StrategyPattern):封装一系列算法,支持我们在运行时,使用相同接口,选择不同算法。它的目的是为了将算法的使用与算法的实现......