2-9 自定义类级别插件—— twoaddresult
本节编程练习不计算学习进度，请电脑登录imooc.com操作

自定义类级别插件—— twoaddresult

通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：

$.addNum(p1,p2) 和 $.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。

例如，在页面的两个文本框中输入任意数值，点击“计算”按钮调用自定义插件中$.addNum()方法，计算两数值的和并将结果显示在另一文本框中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“计算”按钮时，调用了自定义插件中的$.addNum()方法计算两个文本框中输入数值的和，并将该值显示在另一文本框中。

任务

我来试试，亲自调用自定义的类级别插件计算两个输入数值的差

在下列代码的第32行，调用自定义插件中的$.subNum()方法计算两个文本框中输入数值的差。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>自定义类级别插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  7.         <script src="http://www.imooc.com/data/jquery.twoaddresult.js" type="text/javascript"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="divtest">
  12.             <div class="title">
  13.                 <span class="fl">自定义类级别插件</span> 
  14.                 <span class="fr">
  15.                     <input id="btnCount" type="button" value="计算" />
  16.                 </span>
  17.             </div>
  18.             <div class="content">
  19.                 两数相减：
  20.                 <input id="Text1" type="text" class="txt" />
  21.                 -
  22.                 <input id="Text2" type="text" class="txt" />
  23.                 =
  24.                 <input id="Text3" type="text" class="txt" />
  25.             </div>
  26.         </div>
  27.  
  28.         <script type="text/javascript">
  29.             $(function () {
  30.                 $("#btnCount").bind("click", function () {
  31.                     $("#Text3").val(
  32.                         ?
  33.             		);
  34.                 });
  35.             });
  36.         </script>
  37.     </body>
  38. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. .txt
  22. {
  23.     border: #666 1px solid;
  24.     padding: 2px;
  25.     width: 40px;
  26.     margin-right: 3px;
  27. }
  28. .fl
  29. {
  30.     float: left;
  31. }
  32. .fr
  33. {
  34.     float: right;
  35. }
下一节