<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. Dynamic CRM2016在一台本地服务器安装部署

    在本地单独一台服务器上安装部署CRM2016时需要提前安装好CRM软件需要的必备软件,具体需要安装的组件如下截图:其中required为必须具备的安装组件.license可以采用微软官网的90天测试版 ...

  2. 第三十八章 springboot+docker（maven）

    回顾上一章的整个部署过程: 使用"mvn install"进行打包jar 将jar移动到与Dockerfile文件相同的文件夹下 编写Dockerfile文件 使用"do ...

  3. AngularJS学习---Routing(路由) & Multiple Views(多个视图) step 7

    1.切换分支到step7,并启动项目 git checkout step- npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代 ...

  4. CentOS7安装mysql5.7.11

    开始安装 yum update yum install wget wget http://repo.mysql.com/mysql57-community-release-el7-7.noarch.r ...

  5. 【笔记】Python 学习Tips

    Lambda Python中给予的定义是用来创建匿名的简单函数(单行).基本的应用场景就是替换简单函数的定义. >>> fl = lambda x : x % 3 >>& ...

  6. Infobright存储引擎的特点

    Infobright的优点: (1)高压缩比率 (2)快速响应复杂的分析查询语句 (3)随着数据库的逐渐增大,查询和装载性能基本保持稳定 (4)没有特殊的数据仓库模型(比如星状模型.雪花模型)要求 ( ...

  7. XE随想4：SuperObject增、删、改

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  8. Linux下apache日志分析与状态查看方法

    假设apache日志格式为:118.78.199.98 – - [09/Jan/2010:00:59:59 +0800] “GET /Public/Css/index.css HTTP/1.1″ 30 ...

  9. net SqlBulkCopy拷贝数据的问题

    服务器配置:windows 2008 ,sql server 2008, oracle 10g. 在本地和同样配置的其他服务器上同样的程序,数据200万都很快就采集过来了,但是在发布的服务器上,如果b ...

  10. 360极速浏览器UA怪异以及如何用js判断360浏览器

    本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...