<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. There is no getter for property named 'NULL' in ……

    往往细节上的错误事最要命的事情,当你看着代码,逻辑上没有问题,但是却又曝出一些莫名其妙不知所以的错,你百度了 说出来的原因又是乱七八糟的鸡肋!很无助,纠结了很久,浪费了很多宝贵的时间--看代码! &l ...

  2. Selenium2+python自动化31-生成测试报告

    前言 最近小伙伴们总有一些测试报告的问题,网上的一些资料生成报告的方法,我试了都不行,完全生成不了,不知道他们是怎么生成的,同样的代码,有待研究. 今天小编写一下可以生成测试报告的方法.个人觉得也是最 ...

  3. 第三十七章 springboot+docker（手动部署）

    一.下载centos镜像 docker pull hub.c.163.com/library/centos:latest docker tag containId centos:7 docker ru ...

  4. zabbix使用sendEmail发送邮件报警

    sendEmail是一个轻量级,命令行的SMTP邮件客户端.如果你需要使用命令行发送邮件,那么sendEmail是非常完美的选择:使用简单并且功能强大.这个被设计用在php.bashperl和web站 ...

  5. VS发布网站详细步骤

    1.打开你的VS2012网站项目,右键点击项目>菜单中 重新生成一下网站项目:再次点击右键>发布: 2.弹出网站发布设置面板,点击<新建..>,创建新的发布配置文件: 输入你自 ...

  6. 学习springMVC框架配置遇到的问题-数据写入不进数据库时的处理办法

    配置完了,运行,数据写入不到数据库中,就应该想UserAction 中的handleRequest()方法有没有进去,然后就设置断点.如果发现程序没有进去,就再想办法进去.

  7. NSArray其中的方法--遍历,

    1. ForLoop, For - in, enumerateObjects这个三个方法的区别: 遍历一个数组用For-in最快. 通过Value查询index的时候, 面对大量的数组推荐使用 enu ...

  8. 使用语句查询mssql死锁

    select spid, blocked, loginame, last_batch, status, cmd, hostname, program_name from sys.sysprocesse ...

  9. static, readonly, const

    static Use the static modifier to declare a static member, which belongs to the type itself rather t ...

  10. maven异常

    1.There are test failures pom中加入: <build> <plugins> <plugin> <groupId>org.ap ...