圆月山庄资源网 Design By www.vgjia.com
本文实例为大家分享了js购物车功能的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } li { list-style: none; } li { float: left; width: 200px; border: 1px #000 solid; margin: 10px; } li img { width: 200px; } p { height: 20px; border-bottom: 1px #333 dashed; } #bus { width: 600px; border: 1px #000 solid; height: 300px; clear: both; } .box1 { float: left; width: 200px; } .box2 { float: left; width: 200px; } .box3 { float: left; width: 200px; } #allMoney { float: right; } </style> <script> window.onload = function() { var oList = document.getElementById('list'); var aLi = oList.getElementsByTagName('li'); var oBus = document.getElementById('bus'); var obj = {}; var iNum = 0; var allMoney = 0; for (var i = 0; i < aLi.length; i++) { aLi[i].ondragstart = function(ev) { //点击拖拽元素的时候,就设置数据,以后放到购物车的时候数据就可以传过去了 var ev = ev || window.event; var aP = this.getElementsByTagName('p'); ev.dataTransfer.setData('title', aP[0].innerHTML); ev.dataTransfer.setData('price', aP[1].innerHTML); ev.dataTransfer.setDragImage(this, 0, 0); } } oBus.ondragover = function(ev) { //阻止鼠标默认事件 var ev = ev || event; ev.preventDefault(); }; oBus.ondrop = function(ev) { var ev = ev || event; var title = ev.dataTransfer.getData('title'); var price = ev.dataTransfer.getData('price'); if(!obj[title]){ var oP = document.createElement('p'); var oSpan = document.createElement('span'); oSpan.className = 'box1'; oSpan.innerHTML = 1; oP.appendChild(oSpan); var oSpan = document.createElement('span'); oSpan.className = 'box2'; oSpan.innerHTML = title; oP.appendChild(oSpan); var oSpan = document.createElement('span'); oSpan.className = 'box3'; oSpan.innerHTML = price; oP.appendChild(oSpan); oBus.appendChild(oP); obj[title] = 1; }else{ var box1 = document.getElementsByClassName('box1'); var box2 = document.getElementsByClassName('box2'); for(var i=0;i<box2.length;i++){ if(box2[i].innerHTML == title){ box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1; }; }; }; //总价 if(!allMoney){ allMoney = document.createElement('div'); allMoney.id = 'allMoney'; } iNum += parseInt(price); allMoney.innerHTML = '¥'+iNum; oBus.appendChild(allMoney); }; }; </script> </head> <body> <ul id="list"> <li draggable="true"> <img src="/UploadFiles/2021-04-02/img1.jpg">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,购物车
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 班得瑞原装进口《第八张新世纪专辑:琉璃湖畔》1CD[APE/CUE分轨][286.4MB]
- 魏如萱.2011-在哪里(EP)【添翼创越】【WAV+CUE】
- 群星.1981-新金曲奖·青年创作园地12合辑(喜玛拉雅复刻版)【歌林】【WAV+CUE】
- 麦洁文.1989-新曲与精丫新艺宝】【WAV+CUE】
- SNH48《薄荷糖 (Mint Candy)》[320K/MP3][33.72MB]
- SNH48《薄荷糖 (Mint Candy)》[FLAC/分轨][78.59MB]
- 刘美麟《同生》[320K/MP3][70.99MB]
- 群星.1994-宝丽金最流行3CD【宝丽金】【WAV+CUE】
- 群星.2024-聆听“某某”影视原声带【华纳】【FLAC分轨】
- 陈慧娴.1989-永远是你的朋友(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 何洛洛.2024-别叫醒我(EP)【光羽】【FLAC分轨】
- 林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE】
- 黄妃.2005-红【亚律】【WAV+CUE】
- 刘美麟《同生》[FLAC/分轨][161.95MB]
- 群星《前途海量 电影原声专辑》[320K/MP3][106.26MB]