<html>

 <head>

 <meta charset="utf-8">

 <title>jQuery实现</title>

 <script src="jquery.js"></script>

 <style type="text/css">

     table{background-color:pink;width:300px;height:200px;}

     td{text-align:center;}

 </style>

 <script language="javascript">

     $("document").ready(function(){

         $("#b1").click(function(){

             var num1=$("#num1").val();

             var num2=$("#num2").val();

             var num3=eval(num1)+eval(num2);

             $("#num3").val(num3);

         });

         $("#b2").click(function(){

             var num1=$("#num1").val();

             var num2=$("#num2").val();

             var num3=eval(num1)-eval(num2);

             $("#num3").val(num3);

         });

         $("#b3").click(function(){

             var num1=$("#num1").val();

             var num2=$("#num2").val();

             var num3=eval(num1)*eval(num2);

             $("#num3").val(num3);

         });

         $("#b4").click(function(){

             var num1=$("#num1").val();

             var num2=$("#num2").val();

             var num3=eval(num1)/eval(num2);

             $("#num3").val(num3);

         });

     });

 </script>

 </head>

 <body>

 <center>

 <form action="" method="post">

     <table border="1px">

         <tr>

             <td>数字1：</td>

             <td><input type="text" id="num1"/></td>

         </tr>

         <tr>

             <td>数字2：</td>

             <td><input type="text" id="num2"/></td>

         </tr>

         <tr>

             <td>结果：</td>

             <td><input type="text" id="num3"/></td>

         </tr>

         <tr>

             <td colspan="4">

                 <input type="button" value="加" id="b1"/>

                 <input type="button" value="减" id="b2"/>

                 <input type="button" value="乘" id="b3"/>

                 <input type="button" value="除" id="b4"/>

             </td>

         </tr>

     </table>

 </form>

 <center>

 </body>

 </html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>九九乘法表</title>

    <style type="text/css">

        table{

            background-color:pink;

            color:red;

        }

    </style>

</head>

<body>

    <h1>计算器</h1>

    <table border="1" align="center">

        <tr>

            <td>数值1：<input type="text" name="num1" id="num1"/></td>

        </tr>

        <tr>

            <td>数值2：<input type="text" name="num2" id="num2"/></td>

        </tr>

        <tr>

            <td>结&nbsp;&nbsp;果：<input type="text" name="num3" id="num3"/></td>

        </tr>

        <tr>

            <td colspan="4"><input type="button" value="加法" style="color:blue;" onclick="add()"/>

            <input type="button" value="减法" style="color:blue;" onclick="reduce()"/>

            <input type="button" value="乘法" style="color:blue;" onclick="multiplication()"/>

            <input type="button" value="除法" style="color:blue;" onclick="division()"/>

            </td>

        </tr>

    </table>

    <script language="javascript">

        function add(){

            var num1=document.getElementById("num1").value;

            var num2=document.getElementById("num2").value;

            if(parseInt(num1)==num1){

                var num1=parseInt(num1);

            }else{

                var num1=parseFloat(num1);

                num1=parseFloat(num1.toFixed(2));

            }

            if(parseInt(num2)==num2){

                var num2=parseInt(num2);

            }else{

                var num2=parseFloat(num2);

                num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/

            }

            document.getElementById("num3").value=num1+num2;

        }

        function reduce(){

            var num1=document.getElementById("num1").value;

            var num2=document.getElementById("num2").value;

            if(parseInt(num1)==num1){

                var num1=parseInt(num1);

            }else{

                var num1=parseFloat(num1);

                num1=parseFloat(num1.toFixed(2));

            }

            if(parseInt(num2)==num2){

                var num2=parseInt(num2);

            }else{

                var num2=parseFloat(num2);

                num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/

            }

            document.getElementById("num3").value=num1-num2;

        }

        function multiplication(){

            var num1=document.getElementById("num1").value;

            var num2=document.getElementById("num2").value;

            if(parseInt(num1)==num1){

                var num1=parseInt(num1);

            }else{

                var num1=parseFloat(num1);

                num1=parseFloat(num1.toFixed(2));

            }

            if(parseInt(num2)==num2){

                var num2=parseInt(num2);

            }else{

                var num2=parseFloat(num2);

                num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/

            }

            document.getElementById("num3").value=num1*num2;

        }

        function division(){

            var num1=document.getElementById("num1").value;

            var num2=document.getElementById("num2").value;

            if(parseInt(num1)==num1){

                var num1=parseInt(num1);

            }else{

                var num1=parseFloat(num1);

                num1=parseFloat(num1.toFixed(2));

            }

            if(parseInt(num2)==num2){

                var num2=parseInt(num2);

            }else{

                var num2=parseFloat(num2);

                num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/

            }

            document.getElementById("num3").value=num1/num2;

        }

    </script>

</body>

</html>

jQuery/javascript实现简单网页计算器的更多相关文章

  1. jsp学习---使用jsp和JavaBean实现超简单网页计算器

    一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...

  2. JavaScript+HTML,简单的计算器实现

    成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...

  3. 用JavaScript制作简单的计算器

    <html > <head> <title>简单计算器</title> <style type="text/css"> ...

  4. 利用css和javascript实现简单的计算器

    <!doctype html> <html> <head> <!--声明当前页面的编码集--> <meta http-equiv="Co ...

  5. javaScript实现简单网页倒计时代码

    <div id="button"> <input type="button" value="同意" id="b0 ...

  6. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  7. JAVASCRIPT实现简单计算器

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...

  8. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  9. JS——制作简单的网页计算器

    用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. jQuery -> bind / live / delegate 的终结者 - on

    Bind()方法: 给元素绑定事件 形式: .bind(eventType[,eventData],handler(eventObject)) eventType,string类型,一个或多个DOM事 ...

  2. 在sqlserver存储过程中给in参数传带逗号值的办法，如传'1','2','3'这样的

    最近在一项目修改中,要在存储过程中给in参数传值,语句写的也对,但怎么执行都得不出结果,如果把这语句直接赋值.执行,却能得出结果,很是奇怪,如: 直接执行select schoolname from ...

  3. var关键字详解

    1,var只能定义局部变量,而不能定义成员变量 2,定义的时候必须同时完成初始化,而不能使用var定义变量为null 3,var本身不是一个新类型,只是用来修饰一个可以推断出具体类型的局部变量 var ...

  4. Sql Server 查询第30条数据到第40条记录数

    1.select top  10 *  from  (select top  40 * from tablename order by id desc);

  5. adb server is out of date killing... 的解决办法

    是adb server端口被占用了 你先执行adb nodaemon server ,查看adb server的端口是多少 1 2 C:\Users\xxxx>adb nodaemon serv ...

  6. UWP好文

    如何将GridViewEX升级到UWP(Universal Windows Platform)平台 : http://blog.csdn.net/powertoolsteam/article/deta ...

  7. nodejs+express使用html和jade

    nodejs+express经常会看到使用jade视图引擎,但是有些人想要访问普通的html页面,这也是可以的: var express = require('express'); var port ...

  8. 将特定TD颜色改变的两种方法

    方法一:取table值 方法二:使用tbody  

  9. 知识总结提炼-AP模块

    http://www.cnblogs.com/bruce_zhao/p/3809686.html 应付模块业务操作流程 供应商管理 供应商概述 在您使用 Oracle Purchasing 之前,需要 ...

  10. linux-3重置root密码

    1.首先确认是redhat7 [root@localhost /]# cat /etc/redhat-release 详细步骤: 第1步:开机后在内核上敲击"e". 第2步:在li ...