<!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>

【前端】【JavaScript】简单的加减乘除计算器的更多相关文章

  1. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

  2. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  3. OC中使用UI自己定义控件实现计算器的设计（版本号1简单的加减乘除，连加，连减，连除，连乘）

    OC中使用UI自己定义控件实现计算器的设计(版本号1简单的加减乘除,连加.连减,连除,连乘) #import <UIKit/UIKit.h> @interface ViewControll ...

  4. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  5. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  6. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  7. 作业1开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  8. 老男孩python作业5-开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  9. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

  10. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

随机推荐

  1. const` 关键字位于函数签名的末尾

    在 C++ 中,const 关键字可以应用于成员函数,表示该函数不会修改对象的成员变量. const 出现在 operator->() 成员函数的末尾,这意味着该成员函数在调用时不会修改对象的任 ...

  2. windows 下搭php环境

    windows 下搭php环境(php7.2+mysql5.7+apache2.4) 1. 先下载需要的软件 1) 先去微软官网下载vc,我下载的是2017版中文简体的.网址为https://www. ...

  3. centos7 nginx+php7yum安装

    centos7 nginx+php7yum安装. 一.安装nginx 1.安装yum源 rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/ ...

  4. 基于 KubeSphere 的分级管理实践

    作者:许伟,航天网信研发工程师 K8s 是容器编排和分布式应用部署领域的领导者,在 K8s 环境中,我们只需要关心应用的业务逻辑,减轻了我们服务器网络以及存储等方面的管理负担.对于一个用户而言,K8s ...

  5. CentOS8安装RabbitMQ3.8.16

    之前安装过旧版的RabbitMQ和Erlang,先卸载. ①:卸载RabbitMQ /sbin/service rabbitmq-server stop yum list | grep rabbitm ...

  6. 应届生必看！23 个高质量 C++ 项目推荐，校招简历秒加分

    大家好,我是小康. 最近,不少同学私信我,临近毕业忙着找工作,想问有没有推荐的 C++ 项目,既能练手又能让简历更出彩.我也想起自己当年毕业时同样的焦虑,知道作为 C++ 后端开发的求职者,有几个实际 ...

  7. 剖析Air724UG的硬件设计，有大发现？03篇

    ​ 今天我们分享第三部分. 四.射频接口 天线接口管脚定义如下: 表格 19:RF_ANT 管脚定义 管脚名 序号 描述 LTE_ANT 46 LTE 天线接口 BT/WiFi_ANT 34 蓝牙/W ...

  8. P4229 某位歌姬的故事

    P4229 某位歌姬的故事 处理复杂点的 dp 题. 思路 先考虑 \(n\) 比较小的情况,把每个询问放到线段上,发现每个格子只能满足覆盖最小的限制,于是考虑将询问有效区间排序考虑. 设 \(f[i ...

  9. 离线快速LCA（最近公共祖先） Tarjan算法

    离线快速LCA(最近公共祖先) Tarjan算法 前言 对于 OIer 来说,LCA 一直是处理树上问题的好帮手,无论是倍增还是树剖都有着优秀的 \(\log n\) 的复杂度.不过由于我们(数据规模 ...

  10. 鸿蒙NEXT开发案例：血型遗传计算

    [引言] 血型遗传计算器是一个帮助用户根据父母的血型预测子女可能的血型的应用.通过选择父母的血型,应用程序能够快速计算出孩子可能拥有的血型以及不可能拥有的血型.这个过程不仅涉及到了简单的数据处理逻辑, ...