用JS做了一个简易的网页计算器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>计算器</title>

    <script type="text/javascript">

        window.onload = function () {

            var oInput01 = document.getElementById('input01');

            var oInput02 = document.getElementById('input02');

            var oFuhao = document.getElementById('fuhao');

            var oBtn = document.getElementById('btn');

            oBtn.onclick = function(){

                var num01 = oInput01.value;

                var num02 = oInput02.value;

                var fuhao = oFuhao.value;

                //验证是否为空

                if(num01==''||num02==''){

                    alert('输入框不能为空！');

                    return;

                }

                if(isNaN(num01)||isNaN(num02)){

                    alert('请输入数字！');

                    return;

                }

                switch (fuhao){

                    //这个value是字符串！

                    case "0":

                        alert((parseFloat(num01)*100+parseFloat(num02)*100)/100);

                        break;

                    case '1':

                        alert((parseFloat(num01)*100-parseFloat(num02)*100)/100);

                        break;

                    case "2":

                        alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000);

                        break;

                    case '3':

                        alert(((parseFloat(num01)*100)/(parseFloat(num02)*100)));

                }

            }

        }

    </script>

</head>

<body>

    <h1>计算器</h1>

    <input type="text" name="" id="input01">

    <select id="fuhao">

        <option value="0">+</option>

        <option value="1">-</option>

        <option value="2">*</option>

        <option value="3">/</option>

    </select>

    <input type="text" name="" id="input02">

    <input type="button" name="" value="计算" id="btn">

</body>

</html>

JS——制作简单的网页计算器的更多相关文章

  1. js制作简单的计算器

    学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...

  2. html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 （播放功能限mp3文件）

    使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言 这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用 还有一个特点, ...

  3. d3.js 制作简单的俄罗斯方块

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...

  4. d3.js 制作简单的贪吃蛇

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...

  5. JQuery制作简单的网页导航特效

    使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触 ...

  6. html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下载 （可播放mp4、avi、mpg、asx、swf各种文件的视频播放代码）

    新增视频播放功能如下图: 左侧网页left.html代码如下: <meta charset="utf-8"> <body style="backgrou ...

  7. jsp学习---使用jsp和JavaBean实现超简单网页计算器

    一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...

  8. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  9. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

随机推荐

  1. Aravis 库编译方法

    Aravis 库编译方法 March 21, 2015 9:40 PM 首先下载 aravis 库的源代码:aravis 库下载地址 这里我们使用的是 aravis_0_2_0,比较老的一个版本. 首 ...

  2. Git 权限控制

    除了 Git 命令,权限控制也是 Git 中极为重要的组成部分,本文主要介绍 GitLab 系统提供的最常用的权限控制功能. 一.分配成员角色 首先来了解下,Git 中的五种角色: 每一种角色所拥有的 ...

  3. 【转】 Pro Android学习笔记（四五）：Dialog（2）：DialogFragment

    [-] 重写onCreateView 通过onCreateView设置UI和按键反馈 信息保存 重写onCreateDialog DialogFragment的实例newInstance()已经在上一 ...

  4. ng2 中的全屏与退出全屏

    1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...

  5. 阶段2-新手上路\项目-移动物体监控系统\Sprint1-声音报警子系统开发\第1节-Sprint Backlog规划

    根据之前的sprint1-声音报警子系统是相对比较大的一个需求,需要把它进一步细化,然后指定sprint Backlog product Backlog是整个产品的功能列表! sprint Backl ...

  6. URAL 2018 The Debut Album (DP)

    题意:给出n长度的数列,其实1的连续个数不超过a,2的连续个数不超过b. 析:dp[i][j][k] 表示前 i 个数,以 j 结尾,并且连续了k个长度,要用滚动数组,要不然MLE. 代码如下: #p ...

  7. hdu1081

    #include<iostream> using namespace std; int GetMaxNum(int a[],int n) //求最大字段和 { int i,sum=0,ma ...

  8. 在Android中使用Protocol Buffers（中篇）

    本文来自网易云社区. FlatBuffers 编码原理 FlatBuffers的Java库只提供了如下的4个类: ./com/google/flatbuffers/Constants.java ./c ...

  9. Flask从入门到做出一个博客的大型教程(一)

    本项目全部在虚拟环境中运行,因此请参照前面的文章,链接为https://blog.csdn.net/u014793102/article/details/80302975 建立虚拟环境后,再接着完成本 ...

  10. Java 课上的语录

    Java 课上的语录 在用系统类库的类的时候啊,你是不是充分的理解这个系统类库的类.比如这个 ArrayList 你是不是知道它里面有这样那样这样那样的函数,能够帮你做各种各样的事情.很重要,你不知道 ...