本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery-1.12.4.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=吧痰辍北?
& lt;按钮id=" btAdd "在我的购物车& lt;/button> & lt; br> & lt; br>
& lt;表id=肮何锍怠北?
& lt; thead>
& lt; tr>
& lt; th>单价& lt;/th>
& lt; th>数量& lt;/th>
& lt; th>小计& lt;/th>
& lt; th>操作& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt;/tbody>
& lt; tfoot>
& lt; tr>
& lt; td colspan=" 4 "祝辞购物车总金额:& lt;跨度id=白堋痹?.00 & lt;/span> & lt;/td>
& lt;/tr>
& lt;/tfoot>
& lt;/table>
& lt;/div>
& lt; div id=耙辰拧弊４? lt;/div>
& lt; script>
$(" #读.page李”).click(函数(){
var n=$ () . html ();
美元(这).parent () .parent () . next()定格(“p: nth-child (' + n + ') ') .slideDown (2000);
美元(这).parent () .parent () . next()定格(“p: nth-child (' + n + ') ') .siblings () . css(“显示”,“没有一个”);
})
$ (' # btAdd ') .click(函数(){
var p=randPrice ();
var c=randCount ();
$(' #车tbody ') .append (& lt; tr> +
“& lt; td>”+ p + + & lt;/td>
' & lt; td> & lt;输入类型=拔谋尽眝alue=" + c +”祝辞& lt;/td>“+
“& lt; td>”+ parseFloat ((p c *) .toFixed (2)) + + & lt;/td>
“& lt; td> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”祝辞,次;& lt;/a> & lt;/td>“+
“& lt;/tr>”);
总额$ (“#”)。html (getTotal ());
});//为“删除“按钮(即X号)绑定事件监听函数,注意:X是后添加的,很多X执行的行为是一样的——使用事件代理
$(' #车tbody ') .delegate (“td祝辞”、“点击”,函数(事件){
event.preventDefault ();
var=event.target;
(美元).parent () .parent () .remove ();
});//为“购买数量”输入框做事件绑定——使用事件代理
$(' #车tbody ') .delegate (“td祝辞输入”、“变化”,函数(事件){
var输入=event.target;
var计算=input.value;
价格=$ var(输入).parent () .prev () . html ();
美元(输入).parent () . next ()。html(价格*数量);
总额$ (“#”)。html (getTotal ());
})//计算购物车的总金额
函数getTotal () {
var和=0;
$ (" # tbody tr td购物车:nth-child (3)”)。每个(函数(我,td) {
和+=方法(td.innerHTML);
})
返回总和;
}
函数randPrice () {
var p=math . random () * 100;
p=p.toFixed (2);
p=parseFloat (p);
返回p;
}
函数randCount () {
var c=Math.floor (math . random () * 10 + 1);
返回c;
}
$(" #头”).load (“php/header。php”);
$(" #页脚”).load (“php/footer。php”);
var=localStorage.getItem主题(“ChoseTheme”);
applyTheme(主题)
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
