设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 544|回复: 0

[jQuery/Js/AJAX] 自己写的jquery报价计算器

[复制链接]

32

主题

34

帖子

359

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
359
发表于 2014-3-4 18:33:33 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
很简单的,只是乘法。修改每个<input type="text" class="input" cheng=35.4> 中cheng的属性即可
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>天十装饰装修报价DIY计算器</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  7. <style type="text/css">
  8. *{ margin:0; padding:0; color:#555555;}
  9. .jsq{ width:500px; margin:0 auto; padding:20px;}
  10. .jsq h2{ font-size:16px; margin:22px 0;}
  11. table{ background:#D3D3D3;}
  12. td{ background:#FFFFFF; padding:8px;font-size:12px;}
  13. td input{ width:50px; height:19px; line-height:19px; border:1px solid #C5C5C5;}
  14. .td-head{ background:#eeeeee;}
  15. .heji{ font-size:20px;}
  16. #zongjia{ color:#FF0004; font-weight:bold;}
  17. </style>
  18. </head>
  19. <body>
  20. <div class="jsq">
  21.   <h2>天十装饰装修报价DIY计算器</h2>
  22. <table width="412" border="0" cellpadding="1" cellspacing="1">
  23.   <tr>
  24.     <td class="td-head" width="191"><strong>项目名称</strong></td>
  25.     <td class="td-head" width="75"><strong>实际工程量</strong></td>
  26.     <td class="td-head" width="49"><strong>单位</strong></td>
  27.     <td class="td-head" width="84"><strong>小计</strong></td>
  28.   </tr>
  29.   <tr>
  30.     <td>电路改造</td>
  31.     <td><input type="text" class="input" cheng=35.4></td>
  32.     <td>米</td>
  33.     <td align="right"><span class="xiaoji">0</span>元</td>
  34.   </tr>
  35.   <tr>
  36.     <td><p >地砖或木地板</p></td>
  37.     <td><input type="text" class="input" cheng=20></td>
  38.     <td><p >平米</p></td>
  39.     <td align="right"><span class="xiaoji">0</span>元</td>
  40.     </tr>
  41.   <tr>
  42.     <td><p >厨卫墙砖</p></td>
  43.     <td><input type="text" class="input" cheng=20></td>
  44.     <td><p >平米</p></td>
  45.     <td align="right"><span class="xiaoji">0</span>元</td>
  46.     </tr>
  47.   <tr>
  48.     <td><p >墙面乳胶漆</p></td>
  49.     <td><input type="text" class="input" cheng=20></td>
  50.     <td><p >平米</p></td>
  51.     <td align="right"><span class="xiaoji">0</span>元</td>
  52.     </tr>
  53.   <tr>
  54.     <td><p >垭口套</p></td>
  55.     <td><input type="text" class="input" cheng=20></td>
  56.     <td><p >延米</p></td>
  57.     <td align="right"><span class="xiaoji">0</span>元</td>
  58.     </tr>
  59.   <tr>
  60.     <td><p >窗口套</p></td>
  61.     <td><input type="text" class="input" cheng=20></td>
  62.     <td><p >延米</p></td>
  63.     <td align="right"><span class="xiaoji">0</span>元</td>
  64.     </tr>
  65.   <tr>
  66.     <td><p >实木复合烤漆套装门</p></td>
  67.     <td><input type="text" class="input" cheng=20></td>
  68.     <td><p >樘</p></td>
  69.     <td align="right"><span class="xiaoji">0</span>元</td>
  70.     </tr>
  71.   <tr>
  72.     <td><p >卧室壁柜</p></td>
  73.     <td><input type="text" class="input" cheng=20></td>
  74.     <td><p >平米</p></td>
  75.     <td align="right"><span class="xiaoji">0</span>元</td>
  76.     </tr>
  77.   <tr>
  78.     <td><p >厨房地柜</p></td>
  79.     <td><input type="text" class="input" cheng=20></td>
  80.     <td><p >延米</p></td>
  81.     <td align="right"><span class="xiaoji">0</span>元</td>
  82.     </tr>
  83.   <tr>
  84.     <td><p >厨房吊柜</p></td>
  85.     <td><input type="text" class="input" cheng=20></td>
  86.     <td><p >延米</p></td>
  87.     <td align="right"><span class="xiaoji">0</span>元</td>
  88.     </tr>
  89.   <tr>
  90.     <td><p >集成吊顶</p></td>
  91.     <td><input type="text" class="input" cheng=20></td>
  92.     <td><p >平米</p></td>
  93.     <td align="right"><span class="xiaoji">0</span>元</td>
  94.     </tr>
  95.   <tr>
  96.     <td><p >卫浴门</p></td>
  97.     <td><input type="text" class="input" cheng=20></td>
  98.     <td>樘</td>
  99.     <td align="right"><span class="xiaoji">0</span>元</td>
  100.     </tr>
  101.   <tr>
  102.     <td><p >隔断推拉门</p></td>
  103.     <td><input type="text" class="input" cheng=20></td>
  104.     <td>平米</td>
  105.     <td align="right"><span class="xiaoji">0</span>元</td>
  106.     </tr>
  107.   <tr>
  108.     <td><p >石膏板吊顶</p></td>
  109.     <td><input type="text" class="input" cheng=20></td>
  110.     <td>平米</td>
  111.     <td align="right"><span class="xiaoji">0</span>元</td>
  112.     </tr>
  113.   <tr>
  114.     <td><p >石膏顶角线</p></td>
  115.     <td><input type="text" class="input" cheng=20></td>
  116.     <td>延米</td>
  117.     <td align="right"><span class="xiaoji">0</span>元</td>
  118.     </tr>
  119.   <tr>
  120.     <td><p >洁具(花洒、坐便、浴室柜)</p></td>
  121.     <td><input type="text" class="input" cheng=20></td>
  122.     <td>组</td>
  123.     <td align="right"><span class="xiaoji">0</span>元</td>
  124.     </tr>
  125.   <tr>
  126.     <td><p >运杂费、管理费</p></td>
  127.     <td><input type="text" class="input" cheng=20></td>
  128.     <td>项</td>
  129.     <td align="right"><span class="xiaoji">0</span>元</td>
  130.     </tr>

  131. </table>

  132.         <div class="heji">DIY装修价格成本合计: <strong>¥<span id="zongjia">0</span></strong> 元 </div>
  133. </div>
  134. <script type="text/javascript">
  135. $(document).ready(function(){
  136.   $(".input").change(function(){
  137.           var input=$(this).val();
  138.           var cheng=$(this).attr("cheng");
  139.           var xiaoji=input*cheng;
  140.           $(this).parent().parent().find("td span").html(xiaoji.toFixed(2));
  141.       //alert(xiaoji.toFixed(2));
  142.           //获得总分
  143.           var zongjia=0;
  144.           $.each($(".xiaoji"),function(){//获得总分
  145.          zongjia+=parseFloat($(this).text());
  146.             });
  147.           $("#zongjia").html(zongjia);
  148.   });
  149. });
  150. </script>
  151. </body>
  152. </html>
复制代码



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:36

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表