用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. 用WinDbg分析Debug Diagnostic Tool生成的Userdump文件

    1.下载WinDbg(Debugging Tools for Windows):http://www.microsoft.com/whdc/devtools/debugging/default.msp ...

  2. 如何利用pyenv 和virtualenv 在单机上搭建多版本python 虚拟开发环境

    pyenv 和virtualenv分别是干什么的? pyenv帮助你在一台机上建立多个版本的python环境, 并提供方便的切换方法. virtualenv则就是将一个目录建立为一个虚拟的python ...

  3. Bellman-Ford算法及其队列优化（SPFA）

    一.算法概述 Bellman-Ford算法解决的是一般情况下的单源最短路径问题.所谓单源最短路径问题:给定一个图G=(V,E),我们希望找到从给定源结点s属于V到每个结点v属于V的最短路径.单源最短路 ...

  4. Go语言是如何处理栈的

    转自:http://tonybai.com/2014/11/05/how-stacks-are-handled-in-go/ Go 1.4Beta1刚刚发布,在Go 1.4Beta1中,Go语言的st ...

  5. 用C语言实现中文到unicode码的转换

    转自:  http://blog.csdn.net/qq_21792169/article/details/50379275 源文件用不同的编码方式编写,会导致执行结果不一样 由于本人喜欢用Notep ...

  6. ML 徒手系列 最大似然估计

    1.最大似然估计数学定义: 假设总体分布为f(x,θ),X1,X2...Xn为总体采样得到的样本.其中X1,X2...Xn独立同分布,可求得样本的联合概率密度函数为: 其中θ是需要求得的未知量,xi是 ...

  7. springMVC绑定json参数之二（2.1）

    二.springmvc 接收不同格式的json字符串 1.首先扫盲几个知识点: 这个绑定json参数讲的都是用@RequestBody标签,所以前台必须传json字符串,不能是json对象,但是如果不 ...

  8. [51nod1106]质数检测

    解题关键: 根据质数的定义,在判断一个数n是否是质数时,我们只要用1至n-1去除n,看看能否整除即可.但我们有更好的办法.先找一个数m,使m的平方大于n,再用<=m的质数去除n(n即为被除数), ...

  9. Angular14 Angular相关命令

    1 创建相关 1.1 创建项目 ng new 项目名  ->  创建新项目 ng new 项目名 --skip-install  -> 不进行模块安装  ng new 项目名 -si ng ...

  10. Coding 如何使用 Coding 开发 Coding

    Coding Anytime Anywhere Coding 团队有 70 多人,分布在全国各地(深圳,北京,上海,成都),我们使用 Coding 作为云端办公室,以云端协作的方式管理事务,文件等,我 ...