用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. CSS之EM相对单位

    之前以为em单位只是在font-size中起到继承作用, 后来慢慢觉得,继承,应该是在几乎所有样式中都可以是实现的,比如height,width,border... 今天才简单测试了下,果真是可以实现 ...

  2. CentOS 6.X 安装 EPEL 源

    CentOS 6.X 自带的软件源可选的并不多,有时候要找到一个偏门一些的软件,用命令一搜怎么都没有源,考虑到使用软件源配合 yum 命令安装可以自动安装依赖,所以加一个新的软件源迫在眉睫. 考虑到同 ...

  3. Vijos:P1098合唱队形

    描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2,…, ...

  4. .NET接入微信支付(一)JS API接入 V3

    前段时间刚接完银联支付,完事后又接了微信支付,前段时间一直急着上线,微信的接入一直没有时间处理,今天我们就来整理一下微信支付的接入方法和要点. 配置: 首先呢微信支付需要通过审核,审核啥的准备工作我就 ...

  5. C# 自定义颜色

    一.需要引用 using System.Windows.Media; 二. 自定义颜色 通过自定义 RGB 的值来达到自定义颜色的目的 Color _Mycolor = Color.FromRgb(5 ...

  6. tar压缩解压缩

    Linux下的tar压缩解压缩命令详解tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以 ...

  7. Unusual Sequences

    题意: 求解合为 y 的总体 gcd 为 x 的正整数非空序列个数. 解法: 特判一下后,原问题等价于合为 s = y/x 的整体gcd为1的正整数序列个数. 1.$ans = \sum_{\sum{ ...

  8. Hive之数据查询

    Hive之数据查询 发布于:2013 年 10 月 11 日 由 Aaron发布于: Hive 一,排序和聚合 对于排序有两种方式,一种是order by 一种是sort by order by 会对 ...

  9. Pig Flatten 解包操作，解元组

    Flatten Operator The FLATTEN operator looks like a UDF syntactically, but it is actually an operator ...

  10. 1、Question: prep_reads.info vs. align_summary.txt

    ###参考:https://www.biostars.org/p/163356/ used TopHat to map my reads against their relative referenc ...