用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. Oracle 12C 新特性之在线重命名、迁移活跃的数据文件

    Oracle 数据库 12c 版本中对数据文件的迁移或重命名不再需要太多繁琐的步骤,可以使用 ALTER DATABASE MOVE DATAFILE 这样的 SQL 语句对数据文件进行在线重命名和移 ...

  2. JS性能之滚动条之外的其他部分

    问题: 如果一个页面宽高比较大,也就是页面需要滚动条来查看其他页面内容,这时候,在滚动条之外的其他部分,是依然处于运行状态. 比如那部分有视频播放,则那些视频虽然在当前窗口看不到,但它们还是会处于播放 ...

  3. docker 容器内服务自启动

    centos6/7 有区别先说6 centos6: 方式一:rc.local + 容器内的启动脚本 1.chkconfig docker on #docker开机自启动2.[root@master y ...

  4. FPGA, Float 32bit, multiplyier by Verilog

    1, FPGA device, using three 18bit x 18 bit multiplier to implement 32bit float multiplier 2, compari ...

  5. Python：字典的pop()方法

    pop():移除序列中的一个元素(默认最后一个元素),并且返回该元素的值. 一)移除list的元素,若元素序号超出list,报错:pop index out of range(超出范围的流行指数): ...

  6. Mac搭建nginx+rtmp服务器

    nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网上整理了安装流程,分享给大家并且作备忘. 一.安装Homebrow 已经安装了brow的可以直接跳过这 ...

  7. C++零碎知识点（一）

    1.sizeof用法总结 ①与strlen比较       strlen 计算字符数组的字符数,以"\0"为结束判断,但不包括.   sizeof 计算数据(数组.变量.类型.结构 ...

  8. Fast Walsh–Hadamard transform

    考虑变换 $$\hat{A_x} = \sum_{i\ or\ x = x}{ A_i }$$ 记 $S_{t}(A,x) = \sum_{c(i,t)\ or\ c(x,t)=c(x,t),\ i ...

  9. linux 安装 elasticsearch

    安装 Java 8 当你提前在使用 Elasticsearch,你开始寻找更好的 Java 性能和兼容性时,您可以选择安装 Oracle 的专有 Java (Oracle JDK 8). 将 Orac ...

  10. SQL标量值函数：小写金额转大写

    我们日常开发业务系统中,作为统计报表中,特别是财务报表,显示中文金额经常遇到. 转换大小写的方法有很多,以下是从数据库函数方面解决这一问题. 效果如图: 调用:SELECT dbo.[Fn_Conve ...