<script type="text/javascript">

function fun(t){

  var fa = parseInt(document.getElementById('fa').value);

  var fb = parseInt(document.getElementById('fb').value);

  var fc = document.getElementById('fc');

  if(isNaN(fa) || isNaN(fb)){

    alert("输入错误，请重新输入");

    return;

  }

  switch(t){

    case 1:

      fc.value = fa + fb;

      break;

    case 2:

      fc.value = fa - fb;

      break;

    case 3:

      fc.value = fa * fb;

      break;

    case 4:

      fc.value = fa / fb;

      break;

  }

}

</script>

</head>

<body>

<input type="text" id="fa" value=""/>

<input type="text" id="fb" value=""/>

<input type="text" id="fc" value=""/>

<input type="button" value="+" onclick="fun(1);" />

<input type="button" value="-" onclick="fun(2);" />

<input type="button" value="x" onclick="fun(3);" />

<input type="button" value="/" onclick="fun(4);" />

HTML   计算器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>计算器</title>

    </head>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">

        $(function(){

            $("button").click(function(){

                var first  = parseInt($("#first").val());//获取第一个数的值并转化为数字

                var second = parseInt($("#second").val());//获取第二个数的值并转化为数字

                var sum    = 0;//定义结果值

                var symbol = parseInt($("[type=radio]:checked").val());//获取符号的值

                //通过对符号的判断计算结果

                switch(symbol){

                    case 0:

                        sum = first + second;

                        break;

                    case 1:

                        sum = first - second;

                        break;

                    case 2:

                        sum = first * second;

                        break;

                    case 3:

                        sum = first / second;

                        break;

                }

                var arr    = ['+','-','*','/'];//输出的符号

                $("h2 span").text(first + arr[symbol] + second +" = " +sum);//把结果输出到结果栏中

            })

        })

    </script>

    <body>

        <h1>计算器</h1>

        <p>数字一：<input type="text" id="first" style="width: 40px;" /></p>

        <p>

            <label><input type="radio" name="symbol" value="0" checked="checked"/>+</label>

            <label><input type="radio" name="symbol" value="1" />-</label>

            <label><input type="radio" name="symbol" value="2" />*</label>

            <label><input type="radio" name="symbol" value="3" />/</label>

        </p>

        <p>数字二：<input type="text" id="second" style="width: 40px;" /></p>

        <p><button>计算</button></p>

        <h2>结果：<span></span></h2>

    </body>

</html>

JS 在 HTML 中做加减乘除的更多相关文章

  1. js的url中传递中文参数乱码，如何获取url中参数问题

    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript ...

  2. 在js传递参数中含加号(+)的处理方式

    一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+).但是对于带有中文的参数来 ...

  3. Js的Url中传递中文参数乱码的解决

    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: 2. 接收参数页面:test02.html 二:如何获取Url& ...

  4. js、html中的单引号、双引号及其转义使用

    js.html中的单引号.双引号及其转义使用在js中对相关字符做判断或取值的时候很多情况下都会用到这些. ------ 在一个网页中的按钮,写onclick事件的处理代码,不小心写成如下:<in ...

  5. 关于js向jsp中传输中文乱码问题

    最近做项目遇到的js向jsp中传中文结果是乱码,不知道是否是我换了用eclipse的原因还是什么,以前用的MyEclipse反正最后解决办法如下: 1.把js文件复制到桌面: 2.打开文件并用另存为u ...

  6. jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

    jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大 ...

  7. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  8. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  9. 探讨 JS 的面向对象中继承的那些事

    最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事. JS中继承的特点: 1.子类继承父类: 2.子类可以用父类的方法和属性 3.子类的改变可以不影响父类 下面用一个例子来 ...

随机推荐

  1. ORACLE 安装Oracle12遇到的问题

    0.全然卸载Oracle10(Windows) 在Windows下多次安装Oracle会造成混乱.重装Oracle的话一定先要干净卸载曾经的Oracle. 一.有必要时先备份 二.卸载步骤 1.用DB ...

  2. kgdb调试注意事项

    0    首先提下注意事项的背景:    kgdb和printk共用一个串口 1    设置波特率:    //最高支持460800波特率    arm-eabi-gdb  ./vmlinux    ...

  3. poj1011Sticks

    传说中的poj必做50题之中的一个-- 这是个传说中的搜索, 一開始以为, 仅仅要棒子加起来等于如果的原始长度, 那么这几根选择的棒子就不用管了, 结果卡在第一个例子-- 看了一下,发现, 代码把1, ...

  4. hdu 4707 Pet 2013年ICPC热身赛A题 dfs水题

    题意:linji的仓鼠丢了,他要找回仓鼠,他在房间0放了一块奶酪,按照抓鼠手册所说,这块奶酪可以吸引距离它D的仓鼠,但是仓鼠还是没有出现,现在给出一张关系图,表示各个房间的关系,相邻房间距离为1,而且 ...

  5. Swift - 加速传感器（CoreMotion）的用法，小球加速运动并反弹样例

    1,加速传感器可以监听到x,y,z三个方向的加速度,使用步骤如下: (1)实例化CMMotionManager类 (2)向CMMotionManager的accelerometerUpdateInte ...

  6. 在bmp上添加字符

    //打开位图文件,得到位图句柄   HBITMAP OpenBmpFile(HDC hDC, LPSTR lpszFileName)   {       HBITMAP hBmp = NULL;    ...

  7. Android Application Fundamentals——Android应用程序基础知识

    Application Fundamentals--应用程序基础知识 Key classes--关键类 Activity Service BroadcastReceiver ContentProvid ...

  8. 极路由1s，固件需要刷入RipOS系统的加40块

    极路由1s,固件需要刷入RipOS系统的加40块,集成wifidog功能,wifi广告路由器的理想选择功能. 经过测试,无线性能稳定,无线可带32个手机客户端. 具体配置: 7620CPU ,主频58 ...

  9. Java读取本地文件，并显示在JSP文件中

        当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相对路径,还可以是网络上的图片路径.在存 ...

  10. 墙体裂缝推荐的情况下驱动的PhoneGap入门，早看早收据

    清华大学出版社推出<构建跨平台APP:PhoneGap移动应用实战> 零门槛的学习APP发展 刮 进步 20以上示范样本APP 3项目APP 台à跨终端à移动开发 完美生命周期:搭建好开发 ...