購物車

時間 2019-11-16
標籤購物車简体版
原文原文鏈接
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/jquery-1.12.4.js"></script></head><body><div id="shop">    <button id="btAdd">個人購物車</button><br><br>    <table id="cart">        <thead>        <tr>            <th>單價</th>            <th>數量</th>            <th>小計</th>            <th>操做</th>        </tr>        </thead>        <tbody>        </tbody>        <tfoot>        <tr>            <td colspan="4">購物車總金額：<span id="total">0.00</span></td>        </tr>        </tfoot>    </table></div><div id="footer"></div><script>    $('#read .page li a').click(function(){        var n=$(this).html();        $(this).parent().parent().next().children('p:nth-child('+n+')').slideDown(2000);        $(this).parent().parent().next().children('p:nth-child('+n+')').siblings().css('display','none');    })    $('#btAdd').click(function(){        var p = randPrice();        var c = randCount();        $('#cart tbody').append('<tr>'+            '<td>'+p+'</td>'+            '<td><input type="text" value="'+c+'"></td>'+            '<td>'+parseFloat((p*c).toFixed(2))+'</td>'+            '<td><a href="#">&times;</a></td>'+            '</tr>');        $('#total').html( getTotal() );    });    //爲「刪除」按鈕(即X號)綁定事件監聽函數，注意：X是後添加的，不少X執行的行爲是同樣的——使用事件代理    $('#cart tbody').delegate('td > a', 'click',function(event){        event.preventDefault();        var a = event.target;        $(a).parent().parent().remove();    });    //爲「購買數量」輸入框作事件綁定——使用事件代理    $('#cart tbody').delegate('td > input','change', function(event){        var input = event.target;        var count = input.value;        var price = $(input).parent().prev().html();        $(input).parent().next().html( price*count );        $('#total').html( getTotal() );    })    //計算購物車的總金額    function getTotal(){        var sum = 0;        $('#cart tbody tr td:nth-child(3)').each(function(i, td){            sum += parseInt(td.innerHTML);        })        return sum;    }    function randPrice(){        var p = Math.random()*100;        p = p.toFixed(2);        p = parseFloat(p);        return p;    }    function randCount() {        var c = Math.floor(Math.random() * 10 + 1);        return c;    }    $('#header').load('php/header.php');    $('#footer').load('php/footer.php');    var theme=localStorage.getItem('ChoseTheme');    applyTheme(theme)</script></body></html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。