zoukankan      html  css  js  c++  java
  • JavaScript实现html购物车代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <title>购物车</title>
        <style>
            input{
                25px;
            }
        </style>
       
    </head>
    <body>
        <div>
            <table border="1" cellspacing="0" cellpadding="10px">
                <thead>
                    <th><input type='checkbox'></th>
                    <th>商品</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>状态</th>
                    <th>库存</th>
                    <th>小计</th>
                </thead>
                <tbody>
                    <tr>
                        <td><input type='checkbox'></td>
                        <td>语音电子红外体温计枪</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" maxlength="2" value="0" disabled>
                            <button class="jia">+</button>
                        </td>
                        <td>
                            69.00
                        </td>
                        <td>
                            有货
                        </td>
                        <td>20</td>
                        <td class="xiaoji"></td>
                    </tr>
                    <tr>
                        <td><input type='checkbox'></td>
                        <td>儿童防晒衣</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" maxlength="2" value="0" disabled>
                            <button class="jia">+</button>
                        </td>
                        <td>
                            109.00
                        </td>
                        <td>
                            有货
                        </td>
                        <td>20</td>
                        <td class="xiaoji"></td>
                    </tr>
                    <tr>
                        <td><input type='checkbox'></td>
                        <td>小黄鸭玩具</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" maxlength="2" value="0" disabled>
                            <button class="jia">+</button>
                        </td>
                        <td>
                            9.90
                        </td>
                        <td>
                            有货
                        </td>
                        <td>20</td>
                        <td class="xiaoji"></td>
                    </tr>
                    <tr>
                        <td><input type='checkbox'></td>
                        <td>儿童滑板车</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" maxlength="2" value="0" disabled>
                            <button class="jia">+</button>
                        </td>
                        <td>
                            169.00
                        </td>
                        <td>
                            有货
                        </td>
                        <td>20</td>
                        <td class="xiaoji"></td>
                    </tr>
                    <tr>
                        <td><input type='checkbox'></td>
                        <td>轻薄长裤</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" maxlength="2" value="0" disabled>
                            <button class="jia">+</button>
                        </td>
                        <td>
                            39.00
                        </td>
                        <td>
                            有货
                        </td>
                        <td>20</td>
                        <td class="xiaoji"></td>
                    </tr>
                    <tr>
                        <td><input type='checkbox'></td>
                        <td>儿童防蚊裤</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" maxlength="2" value="0" disabled>
                            <button class="jia">+</button>
                        </td>
                        <td>
                            29.00
                        </td>
                        <td>
                            有货
                        </td>
                        <td>20</td>
                        <td class="xiaoji"></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5"></td>
                        <td>总计</td>
                        <td class="total"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    <script type="text/javascript">
    	$(".jia").click(function  () {
    		var num = $(this).prev().val();
    		if(num==20){
    			return;
    		}
    		
    		$(this).prev().val(parseInt(++num));
    		$(this).parent().next().next().next().text(20-num) 
    		 if ($(this).parent().next().next().next().text()==0) {
    			$(this).parent().next().next().text('无货')
    		}
    		 money ()
    	})
    	$(".jian").click(function  () {
    		
    		var num = $(this).next().val();
    		if(num==0){
    			return;
    		}
    		$(this).next().val(parseInt(--num));
    		$(this).parent().next().next().next().text(20-num)
    		
    			$(this).parent().next().next().text('有货')
    			money ()
    	})
    	
    	function money () {
    		var price=$('.jia').parent().next();
    		var num= $('.jia').prev();
    		var xiaoji = $('.xiaoji');
    		var sum = 0.0;
    		for (var i=0;i<price.length;i++) {
    			var price1 = parseFloat(price.eq(i).text());
    			var num1 = parseFloat(num.eq(i).val());
    		//	alert(price1*num1)
    			xiaoji.eq(i).text((price1*num1).toFixed(2))
    			sum+=price1*num1;
    		}
    		$('.total').text(sum.toFixed(2));
    		
    	}
    	
    </script>
    </body>
    </html>
    
  • 相关阅读:
    1 < 2 < 3为true, 3 > 2 > 1为false
    我的第五代选择器Icarus
    浮动不换行
    教你游泳,不会游的看了包你学会!!! 分享
    node.js 一个简单的页面输出
    天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,增益其所不能
    setTimeout和setInterval的使用
    JS window.open()属性
    车牌识别及验证码识别的一般思路
    苹果开发者账号注册流程
  • 原文地址:https://www.cnblogs.com/a1439775520/p/12946827.html
Copyright © 2011-2022 走看看