用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. C#添加修改控件css样式

    一.添加属性 MyStyleSheet.Attributes.Add("href","/css/flostyle.css") 二.改变css样式 if (use ...

  2. mysqladmin命令用法

    mysqladmin 工具的使用格式: mysqladmin [option] command [command option] command ...... option 选项: -c  numbe ...

  3. error: converting to execution character set: Invalid or incomplete multibyte or wide character

    交叉编译.c文件,遇到如下问题 arm-linux-gcc -o show_lines show_lines.c -lfreetype -lm show_lines.c:199:19: error: ...

  4. 对象流demo1----

    对象流demo1: package com.etc.test; import java.io.BufferedInputStream; import java.io.BufferedOutputStr ...

  5. sql 根据年份、月份查询数据

    CREATE TABLE [dbo].[T_UserAccess]( ,) NOT NULL, [UserId] [int] NULL, [UserType] [int] NULL, ) NULL, ...

  6. CSS如何计算优先级？如何计算权重？

    (1) 优先级就近原则,同权重以最近者为准 载入样式以最后载入的样式为准: 同权重下:内联样式表(标签内部) > 嵌入样式表(当前文件) > 外部样式表(外部文件) !import > ...

  7. shell自动收集服务器硬件系统信息

    shell自动收集服务器硬件系统信息,插入数据库并通过web页面显示. 一,shell自动收集服务器硬件系统信息,插入数据库.#centos 7操作系统下 #!/bin/bash #auto get ...

  8. NEKOGAMES

    http://bbs.3dmgame.com/thread-4133434-1-1.html

  9. 树莓派 Learning 002 装机后的必要操作 --- 04 添加软件源 之 添加公钥 --- 解决“由于没有公钥，无法验证下列签名”问题

    树莓派 装机后的必要操作 - 添加软件源 解决 添加公钥 时会遇到的问题 当你添加完Debian的软件源后,在终端中执行sudo apt-get update时,会出现下面的错误:(这里我添加了3个软 ...

  10. 8、泛型程序设计与c++标准模板库2.5容器适配器

    容器适配器是用来扩展7中基本容器的,是修改和调整其他类接口的类.他们不提供存放数据的实际数据结构的实现方法,而且容器适配器也不支持迭代器. 1.标准栈容器 使用STL中的标准栈为程序员提供了一层附加的 ...