1.  <html>
  2.  <head>
  3.  <meta charset="utf-8">
  4.  <title>jQuery实现</title>
  5.  <script src="jquery.js"></script>
  6.  
  7.  <style type="text/css">
  8.      table{background-color:pink;width:300px;height:200px;}
  9.      td{text-align:center;}
  10.  </style>
  11.  
  12.  <script language="javascript">
  13.      $("document").ready(function(){
  14.          $("#b1").click(function(){
  15.              var num1=$("#num1").val();
  16.              var num2=$("#num2").val();
  17.              var num3=eval(num1)+eval(num2);
  18.              $("#num3").val(num3);
  19.  
  20.          });
  21.  
  22.          $("#b2").click(function(){
  23.              var num1=$("#num1").val();
  24.              var num2=$("#num2").val();
  25.              var num3=eval(num1)-eval(num2);
  26.              $("#num3").val(num3);
  27.          });
  28.  
  29.          $("#b3").click(function(){
  30.              var num1=$("#num1").val();
  31.              var num2=$("#num2").val();
  32.              var num3=eval(num1)*eval(num2);
  33.              $("#num3").val(num3);
  34.          });
  35.  
  36.          $("#b4").click(function(){
  37.              var num1=$("#num1").val();
  38.              var num2=$("#num2").val();
  39.              var num3=eval(num1)/eval(num2);
  40.              $("#num3").val(num3);
  41.          });
  42.      });
  43.  </script>
  44.  </head>
  45.  <body>
  46.  <center>
  47.  <form action="" method="post">
  48.      <table border="1px">
  49.          <tr>
  50.              <td>数字1：</td>
  51.              <td><input type="text" id="num1"/></td>
  52.          </tr>
  53.          <tr>
  54.              <td>数字2：</td>
  55.              <td><input type="text" id="num2"/></td>
  56.          </tr>
  57.          <tr>
  58.              <td>结果：</td>
  59.              <td><input type="text" id="num3"/></td>
  60.          </tr>
  61.          <tr>
  62.              <td colspan="4">
  63.                  <input type="button" value="加" id="b1"/>
  64.                  <input type="button" value="减" id="b2"/>
  65.                  <input type="button" value="乘" id="b3"/>
  66.                  <input type="button" value="除" id="b4"/>
  67.              </td>
  68.          </tr>
  69.      </table>
  70.  </form>
  71.  <center>
  72.  </body>
  73.  </html>

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>九九乘法表</title>
  5.     <style type="text/css">
  6.         table{
  7.             background-color:pink;
  8.             color:red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <h1>计算器</h1>
  14.     <table border="1" align="center">
  15.         <tr>
  16.             <td>数值1：<input type="text" name="num1" id="num1"/></td>
  17.         </tr>
  18.         <tr>
  19.             <td>数值2：<input type="text" name="num2" id="num2"/></td>
  20.         </tr>
  21.         <tr>
  22.             <td>结&nbsp;&nbsp;果：<input type="text" name="num3" id="num3"/></td>
  23.         </tr>
  24.         <tr>
  25.             <td colspan="4"><input type="button" value="加法" style="color:blue;" onclick="add()"/>
  26.             <input type="button" value="减法" style="color:blue;" onclick="reduce()"/>
  27.             <input type="button" value="乘法" style="color:blue;" onclick="multiplication()"/>
  28.             <input type="button" value="除法" style="color:blue;" onclick="division()"/>
  29.             </td>
  30.         </tr>
  31.  
  32.     </table>
  33.     <script language="javascript">
  34.         function add(){
  35.             var num1=document.getElementById("num1").value;
  36.             var num2=document.getElementById("num2").value;
  37.             if(parseInt(num1)==num1){
  38.                 var num1=parseInt(num1);
  39.             }else{
  40.                 var num1=parseFloat(num1);
  41.                 num1=parseFloat(num1.toFixed(2));
  42.             }
  43.             if(parseInt(num2)==num2){
  44.                 var num2=parseInt(num2);
  45.             }else{
  46.                 var num2=parseFloat(num2);
  47.                 num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
  48.             }
  49.             document.getElementById("num3").value=num1+num2;
  50.         }
  51.         function reduce(){
  52.             var num1=document.getElementById("num1").value;
  53.             var num2=document.getElementById("num2").value;
  54.             if(parseInt(num1)==num1){
  55.                 var num1=parseInt(num1);
  56.             }else{
  57.                 var num1=parseFloat(num1);
  58.                 num1=parseFloat(num1.toFixed(2));
  59.             }
  60.             if(parseInt(num2)==num2){
  61.                 var num2=parseInt(num2);
  62.             }else{
  63.                 var num2=parseFloat(num2);
  64.                 num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
  65.             }
  66.             document.getElementById("num3").value=num1-num2;
  67.         }
  68.         function multiplication(){
  69.             var num1=document.getElementById("num1").value;
  70.             var num2=document.getElementById("num2").value;
  71.             if(parseInt(num1)==num1){
  72.                 var num1=parseInt(num1);
  73.             }else{
  74.                 var num1=parseFloat(num1);
  75.                 num1=parseFloat(num1.toFixed(2));
  76.             }
  77.             if(parseInt(num2)==num2){
  78.                 var num2=parseInt(num2);
  79.             }else{
  80.                 var num2=parseFloat(num2);
  81.                 num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
  82.             }
  83.             document.getElementById("num3").value=num1*num2;
  84.         }
  85.         function division(){
  86.             var num1=document.getElementById("num1").value;
  87.             var num2=document.getElementById("num2").value;
  88.             if(parseInt(num1)==num1){
  89.                 var num1=parseInt(num1);
  90.             }else{
  91.                 var num1=parseFloat(num1);
  92.                 num1=parseFloat(num1.toFixed(2));
  93.             }
  94.             if(parseInt(num2)==num2){
  95.                 var num2=parseInt(num2);
  96.             }else{
  97.                 var num2=parseFloat(num2);
  98.                 num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
  99.             }
  100.             document.getElementById("num3").value=num1/num2;
  101.         }
  102.     </script>
  103. </body>
  104. </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. 如何创建多个Memcached服务

    在学习Memcached时,为了模拟分布存储,常常需要建多个Memcached服务,如何建呢,只能使用命令行了 运行cmd,输入如下命令 sc create "Memcached Serve ...

  2. HDU 4578 Transformation （线段树区间多种更新）

    http://acm.hdu.edu.cn/showproblem.php?pid=4578 题目大意:对于一个给定序列,序列内所有数的初始值为0,有4种操作.1:区间(x, y)内的所有数字全部加上 ...

  3. Servlet的5种方式实现表单提交（注册小功能），后台获取表单数据

    用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...

  4. 問題排查：沒有任何多載符合 System.Timers.ElapsedEventHandler 委派

    這是在實作當前專案最後一個關鍵功能:提醒通知 所遇到的奇怪狀況 目前的設想,是以 Windows Form 結合 Timer,當作發送通知的載體 大家都知道在 C# 的環境裡,有三種內建的 Timer ...

  5. 咏南中间件+开发框架支持最新的DELPHI XE10.1(BERLIN) UPDATE1

    咏南中间件+开发框架支持最新的DELPHI XE10.1(BERLIN) UPDATE1 购买提供:中间件源码,价格十分优惠!有意者请向本人索取演示程序! 附带福利(赠送): CS开发框架源码BS开发 ...

  6. java JVM垃圾回收机制

    Java语言出来之前,大家都在拼命的写C或者C++的程序,而此时存在一个很大的矛盾,C++等语言创建对象要不断的去开辟空间,不用的时候有需要不断的去释放控件,既要写构造函数,又要写析构函数,很多时候都 ...

  7. ue4 SNew背后的逻辑

    ue4的ui库Slate体系非常庞大,即使是在创建对象这一小事上,也是相当复杂: SLATECORE_API TSharedRef<SWidget> SNullWidget::NullWi ...

  8. lsslot

    lsslot 命令 用途 显示动态可重新配置的插槽(比如热插拔)及其特性. 语法 lsslot -c ConnectorType [ -a | -o | -l DeviceName | -s Slot ...

  9. iOS多线程编程指南（二）线程管理

    当应用程序生成一个新的线程的时候,该线程变成应用程序进程空间内的一个实体.每个线程都拥有它自己的执行堆栈,由内核调度独立的运行时间片.一个线程可以和其他线程或其他进程通信,执行I/O操作,甚至执行任何 ...

  10. 更换光纤后路由器端口映射 -VPN相关

    之前一直是ADSL的线路,使用路由器后,很简单就可以实现端口映射了!外网也可以随意连接,可是最近升级宽带更换了光纤后,发现怎么都不能正常工作了!在光纤猫里显示的IP居然是:10.0.*.*,查询到的外 ...