html5手机端动画效果的添加到购物车特效代码 - jQueryfuns
上传于 4个月前|
立即下载 ( 文件大小：0.04 M)
Mozilla Firefox
Google Chrome
也许你还喜欢
键盘快捷键:1您所在的位置： &
一步步教你如何用HTML 5拖拽功能打造购物车(3)
一步步教你如何用HTML 5拖拽功能打造购物车(3)
在本文中，将指导读者认识 HTML 5中的拖拽功能，并且使用它来打造一款基本的购物车。这个购物车很简单，我们只往其中放置一件商品然后检查是否已有商品了，如果已经存在同样的商品，则更 新其数量和价格。本文要求读者有初步的HTML 5基础知识和一定基础的Javascript知识即可。
更新总价格
一旦购物车的商品数量增加了，我们就要重新计算总价格。这里我们再次使用了
querySelectorAll功能。我们只需要遍历购物车中的每一个商品并重新计算价格就可以了，这里是取了两位小数位。
function&updateCart(){&&&&&var&total&=&0.0;&&&&&var&cart_items&=&document.querySelectorAll(&#cart&ul&li&)&&&&&for&(var&i&=&0;&i&&;&i++)&{&&&&&&&&&var&cart_item&=&cart_items[i];&&&&&&&&&var&quantity&=&cart_item.getAttribute('data-quantity');&&&&&&&&&var&price&=&cart_item.getAttribute('data-price');&&&&&&&&&&&&&&&&&&var&sub_total&=&parseFloat(quantity&*&parseFloat(price));&&&&&&&&&cart_item.querySelectorAll(&span.sub-total&)[0].innerHTML&=&&&=&&&+&sub_total.toFixed(2);&&&&&&&&&&&&&&&&&&total&+=&sub_&&&&&}&&&&&&&&&&document.querySelectorAll(&#cart&span.total&)[0].innerHTML&=&total.toFixed(2);&
从下图中可以看到当拖拽多个商品到购物车中，商品的总价格是会增加的：
最后我们总体看下所有的Javascript代码如下所示。
function&addEvent(element,&event,&delegate&)&{&&&&&if&(typeof&(window.event)&!=&'undefined')&&&&&&&&&element.attachEvent('on'&+&event,&delegate);&&&&&else&&&&&&&&&element.addEventListener(event,&delegate,&false);&}&&addEvent(document,&'readystatechange',&function()&{&&&&&if&(&document.readyState&!==&&complete&&)&&&&&&&&&&return&&&&&&&&&&&&&&&var&items&=&document.querySelectorAll(&section.products&ul&li&);&&&&&var&cart&=&document.querySelectorAll(&#cart&ul&)[0];&&&&&&&&&&function&updateCart(){&&&&&&&&&var&total&=&0.0;&&&&&&&&&var&cart_items&=&document.querySelectorAll(&#cart&ul&li&)&&&&&&&&&for&(var&i&=&0;&i&&;&i++)&{&&&&&&&&&&&&&var&cart_item&=&cart_items[i];&&&&&&&&&&&&&var&quantity&=&cart_item.getAttribute('data-quantity');&&&&&&&&&&&&&var&price&=&cart_item.getAttribute('data-price');&&&&&&&&&&&&&&&&&&&&&&&&&&var&sub_total&=&parseFloat(quantity&*&parseFloat(price));&&&&&&&&&&&&&cart_item.querySelectorAll(&span.sub-total&)[0].innerHTML&=&&&=&&&+&sub_total.toFixed(2);&&&&&&&&&&&&&&&&&&&&&&&&&&total&+=&sub_&&&&&&&&&}&&&&&&&&&&&&&&&&&&document.querySelectorAll(&#cart&span.total&)[0].innerHTML&=&total.toFixed(2);&&&&&}&&&&&&&&&&function&addCartItem(item,&id)&{&&&&&&&&&var&clone&=&item.cloneNode(true);&&&&&&&&&clone.setAttribute('data-id',&id);&&&&&&&&&clone.setAttribute('data-quantity',&1);&&&&&&&&&clone.removeAttribute('id');&&&&&&&&&&&&&&&&&&var&fragment&=&document.createElement('span');&&&&&&&&&fragment.setAttribute('class',&'quantity');&&&&&&&&&fragment.innerHTML&=&'&x&1';&&&&&&&&&clone.appendChild(fragment);&&&&&&&&&&&&&&&&&&&&&&fragment&=&document.createElement('span');&&&&&&&&&fragment.setAttribute('class',&'sub-total');&&&&&&&&&clone.appendChild(fragment);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&cart.appendChild(clone);&&&&&}&&&&&&&&&&function&updateCartItem(item){&&&&&&&&&var&quantity&=&item.getAttribute('data-quantity');&&&&&&&&&quantity&=&parseInt(quantity)&+&1&&&&&&&&&item.setAttribute('data-quantity',&quantity);&&&&&&&&&var&span&=&item.querySelectorAll('span.quantity');&&&&&&&&&span[0].innerHTML&=&'&x&'&+&&&&&&}&&&&&&&&&&function&onDrop(event){&&&&&&&&&&&&&&&&&&&&&if(event.preventDefault)&event.preventDefault();&&&&&&&&&if&(event.stopPropagation)&event.stopPropagation();&&&&&&&&&else&event.cancelBubble&=&true;&&&&&&&&&&&&&&&&&&var&id&=&event.dataTransfer.getData(&Text&);&&&&&&&&&var&item&=&document.getElementById(id);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&exists&=&document.querySelectorAll(&#cart&ul&li[data-id='&&+&id&+&&']&);&&&&&&&&&&&&&&&&&&if(exists.length&&0){&&&&&&&&&&&&&updateCartItem(exists[0]);&&&&&&&&&}&else&{&&&&&&&&&&&&&addCartItem(item,&id);&&&&&&&&&}&&&&&&&&&&&&&&&&&&updateCart();&&&&&&&&&&&&&&&&&&return&&&&&&}&&&&&&&&&&function&onDragOver(event){&&&&&&&&&if(event.preventDefault)&event.preventDefault();&&&&&&&&&if&(event.stopPropagation)&event.stopPropagation();&&&&&&&&&else&event.cancelBubble&=&true;&&&&&&&&&return&&&&&&}&&&&&&addEvent(cart,&'drop',&onDrop);&&&&&addEvent(cart,&'dragover',&onDragOver);&&&&&&&&&&function&onDrag(event){&&&&&&&&&event.dataTransfer.effectAllowed&=&&move&;&&&&&&&&&event.dataTransfer.dropEffect&=&&move&;&&&&&&&&&var&target&=&event.target&||&event.srcE&&&&&&&&&var&success&=&event.dataTransfer.setData('Text',&target.id);&&&&&}&&&&&&&&&&&&&&&&&&&for&(var&i&=&0;&i&&;&i++)&{&&&&&&&&&var&item&=&items[i];&&&&&&&&&item.setAttribute(&draggable&,&&true&);&&&&&&&&&addEvent(item,&'dragstart',&onDrag);&&&&&};&});&
本文的demo可以在中看到，
完整代码可以在中获得下载。
【编辑推荐】
【责任编辑： TEL：（010）】
内容导航&第 1 页： &第 2 页： &第 3 页：
关于&&的更多文章
这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书
网友评论TOP5
移动互联网时代，许多人首要考虑的不再是Windows / Mac的安全竞争，即便Windows的安全性有所改善。当下最大的担忧是iOS和Android移动设备上的安全。再一次苹果 “围墙花园”似的系统似乎比Android在开放情况下创建安全环境更受欢迎。
讲师： 0人学习过讲师： 31人学习过讲师： 50人学习过
一周一周的过的很快，2013年已经进入了倒计时。开发频
在脚本语言领域，Lua是最快、最高效的脚本语言之一，
2014年节假放假安于这周出台，80%的公民对此次的放假
本书全面介绍了Windows Server 2003 R2中最常用的各种服务，包括域名服务、动态IP地址服务、Windows名称服务、活动目录服务、Web
51CTO旗下网站手机微信订餐购物车结算模板
相关最新源码
手机微信订餐购物车结算模板基于jquery-1.7.1.min.js制作，商品加入购物车自动结算实例，可以添加减少商品数量。
&&&&&&&&&&&&&&&&&&&&&&&&&
源码下载地址&&&&&&&&&&&
&div class="catbox"&
&table id="cartTable"&
&th&&label&
&input class="check-all check" type="checkbox"&&&全选&/label&&/th&
&th&商品&/th&
&th&单价&/th&
&th&数量&/th&
&th&小计&/th&
&th&操作&/th&
&tr class="on"&
&td class="checkbox"&&input class="check-one check" type="checkbox"&&/td&
&td class="goods"&&img src="" alt=""&&span&Casio/卡西欧 EX-TR350&/span&&/td&
&td class="price"&5999.88&/td&
&td class="count"&&span class="reduce"&&/span&
&input class="count-input" type="text" value="1"&
&span class="add"&+&/span&&/td&
&td class="subtotal"&5999.88&/td&
&td class="operation"&&span class="delete"&删除&/span&&/td&
&tr class="on"&
&td class="checkbox"&&input class="check-one check" type="checkbox"&&/td&
&td class="goods"&&img src="" alt=""&&span&Canon/佳能 PowerShot SX50 HS&/span&&/td&
&td class="price"&3888.50&/td&
&td class="count"&&span class="reduce"&&/span&
&input class="count-input" type="text" value="1"&
&span class="add"&+&/span&&/td&
&td class="subtotal"&3888.50&/td&
&td class="operation"&&span class="delete"&删除&/span&&/td&
&tr class="on"&
&td class="checkbox"&&input class="check-one check" type="checkbox"&&/td&
&td class="goods"&&img src="" alt=""&&span&Sony/索尼 DSC-WX300&/span&&/td&
&td class="price"&1428.50&/td&
&td class="count"&&span class="reduce"&&/span&
&input class="count-input" type="text" value="1"&
&span class="add"&+&/span&&/td&
&td class="subtotal"&1428.50&/td&
&td class="operation"&&span class="delete"&删除&/span&&/td&
&tr class="on"&
&td class="checkbox"&&input class="check-one check" type="checkbox"&&/td&
&td class="goods"&&img src="" alt=""&&span&Fujifilm/富士 instax mini 25&/span&&/td&
&td class="price"&640.60&/td&
&td class="count"&&span class="reduce"&&/span&
&input class="count-input" type="text" value="1"&
&span class="add"&+&/span&&/td&
&td class="subtotal"&640.60&/td&
&td class="operation"&&span class="delete"&删除&/span&&/td&
&div class="foot" id="foot"&
&label class="fl select-all"&&input type="checkbox" class="check-all check"&&&全选&/label&
&a class="fl delete" id="deleteAll" href="javascript:;"&删除&/a&
&div class="fr closing" onclick="getTotal();"&结 算&/div&
&input type="hidden" id="cartTotalPrice"&
&div class="fr total"&合计：￥&span id="priceTotal"&11957.48&/span&&/div&
&div class="fr selected" id="selected"&已选商品&span id="selectedTotal"&4&/span&件&span class="arrow up"&︽&/span&&span class="arrow down"&︾&/span&&/div&
&div class="selected-view"&
&div id="selectedViewList" class="clearfix"&&div&&img src="/demo/jquery-guc/images/1.jpg"&&span class="del" index="0"&取消选择&/span&&/div&&div&&img src="/demo/jquery-guc/images/2.jpg"&&span class="del" index="1"&取消选择&/span&&/div&&div&&img src="/demo/jquery-guc/images/3.jpg"&&span class="del" index="2"&取消选择&/span&&/div&&div&&img src="/demo/jquery-guc/images/4.jpg"&&span class="del" index="3"&取消选择&/span&&/div&&/div&
&span class="arrow"&◆&span&◆&/span&&/span& &/div&
&style type="text/css"&
*{margin:0;padding:0;list-style-type:}
a{color:#666;text-decoration:}
table{border-collapse:border-spacing:0;border:0;}
body{color:#666;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
clearfix:after{content:".";display:height:0;clear:visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
.fl{float:}
.fr{float:}
.catbox{width:940margin:100}
.catbox table{text-align:width:100%;}
.catbox table th,.catbox table td{border:1px solid #CADEFF;}
.catbox table th{background:#e2f2border-top:3px solid #a7height:30}
.catbox table td{padding:10color:#444;}
.catbox table tbody tr:hover{background:RGB(238,246,255);}
.checkbox{width:60}
.check-all{ vertical-align:}
.goods{width:300}
.goods span{width:180margin-top:20text-align:float:}
.goods img{width:100height:80margin-right:10float:}
.price{width:130}
.count{width:90}
.count .add, .count input, .count .reduce{float:margin-right:-1position:z-index:0;}
.count .add, .count .reduce{height:23width:17border:1px solid #e5e5e5;background:#f0f0f0;text-align:line-height:23color:#444;}
.count .add:hover, .count .reduce:hover{color:#f50;z-index:3;border-color:#f60;cursor:}
.count input{width:50height:25line-height:15border:1px solid #color:#343434;text-align:padding:4px 0;background-color:#z-index:2;}
.subtotal{width:150color:font-weight:}
.operation span:hover,a:hover{cursor:color:text-decoration:}
.foot{margin-top:0color:#666;height:48border:1px solid #c8c8c8;border-top:0;background-color:#background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position:z-index:8;}
.foot div, .foot a{line-height:48height:48}
.foot .select-all{width:80height:48line-height:48color:#666;text-align:}
.foot .delete{padding-left:10}
.foot .closing{border-left:1px solid #c8c8c8;width:103text-align:color:#666;font-weight:cursor:background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));}
.foot .closing:hover{background-image:linear-gradient(RGB(226,226,226),RGB(241,241,241));color:#333;}
.foot .total{margin:0 20cursor:}
#priceTotal, .foot #selectedTotal{color:font-family:"Microsoft Yahei";font-weight:}
.foot .selected{cursor:}
.foot .selected .arrow{position:top:-3margin-left:3}
.foot .selected .down{position:top:3display:}
.show .selected .down{display:}
.show .selected .up{display:}
.foot .selected:hover .arrow{color:}
.foot .selected-view{width:938border:1px solid #c8c8c8;position:height:background:#z-index:9;bottom:48left:-1display:}
.show .selected-view{display:}
.foot .selected-view div{height:}
.foot .selected-view .arrow{font-size:16line-height:100%;color:#c8c8c8;position:right:330bottom:-9}
.foot .selected-view .arrow span{color:#position:left:0bottom:1}
#selectedViewList{padding:10px 20px 10px 20}
#selectedViewList div{display:inline-position:width:100height:80border:1px solid #margin:10float:}
#selectedViewList div img{width:100height:80margin-right:10float:}
#selectedViewList div span{display:color:#font-size:12position:top:0right:0width:60height:18line-height:18text-align:background:#000;cursor:}
#selectedViewList div:hover span{display:}
* Created by an
window.onload = function () {
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cls) {
var ret = [];
var els = document.getElementsByTagName('*');
for (var i = 0, len = els. i & i++) {
if (els[i].className.indexOf(cls + ' ') &=0 || els[i].className.indexOf(' ' + cls + ' ') &=0 || els[i].className.indexOf(' ' + cls) &=0) {
ret.push(els[i]);
var table = document.getElementById('cartTable'); // 购物车表格
var selectInputs = document.getElementsByClassName('check'); // 所有勾选框
var checkAllInputs = document.getElementsByClassName('check-all') // 全选框
var tr = table.children[1]. //行
var selectedTotal = document.getElementById('selectedTotal'); //已选商品数目容器
var priceTotal = document.getElementById('priceTotal'); //总计
var deleteAll = document.getElementById('deleteAll'); // 删除全部按钮
var selectedViewList = document.getElementById('selectedViewList'); //浮层已选商品列表容器
var selected = document.getElementById('selected'); //已选商品
var foot = document.getElementById('foot');
// 更新总数和总价格，已选浮层
function getTotal() {
var seleted = 0;
var price = 0;
var HTMLstr = '';
for (var i = 0, len = tr. i & i++) {
if (tr[i].getElementsByTagName('input')[0].checked) {
tr[i].className = 'on';
seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
price += parseFloat(tr[i].cells[4].innerHTML);
HTMLstr += '&div&&img src="' + tr[i].getElementsByTagName('img')[0].src + '"&&span class="del" index="' + i + '"&取消选择&/span&&/div&'
tr[i].className = '';
selectedTotal.innerHTML =
priceTotal.innerHTML = price.toFixed(2);
selectedViewList.innerHTML = HTML
if (seleted == 0) {
foot.className = 'foot';
// 计算单行价格
function getSubtotal(tr) {
var cells = tr.
var price = cells[2]; //单价
var subtotal = cells[4]; //小计td
var countInput = tr.getElementsByTagName('input')[1]; //数目input
var span = tr.getElementsByTagName('span')[1]; //-号
//写入HTML
subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
//如果数目只有一个，把-号去掉
if (countInput.value == 1) {
span.innerHTML = '';
span.innerHTML = '-';
// 点击选择框
for(var i = 0; i & selectInputs. i++ ){
selectInputs[i].onclick = function () {
if (this.className.indexOf('check-all') &= 0) { //如果是全选，则吧所有的选择框选中
for (var j = 0; j & selectInputs. j++) {
selectInputs[j].checked = this.checked;
if (!this.checked) { //只要有一个未勾选，则取消全选框的选中状态
for (var i = 0; i & checkAllInputs. i++) {
checkAllInputs[i].checked = false;
getTotal();//选完更新总计
// 显示已选商品弹层
selected.onclick = function () {
if (selectedTotal.innerHTML != 0) {
foot.className = (foot.className == 'foot' ? 'foot show' : 'foot');
//已选商品弹层中的取消选择按钮
selectedViewList.onclick = function (e) {
var e = e || window.event;
var el = e.srcE
if (el.className=='del') {
var input =
tr[el.getAttribute('index')].getElementsByTagName('input')[0]
input.checked = false;
input.onclick();
//为每行元素添加事件
for (var i = 0; i & tr. i++) {
//将点击事件绑定到tr元素
tr[i].onclick = function (e) {
var e = e || window.event;
var el = e.target || e.srcE //通过事件对象的target属性获取触发元素
var cls = el.classN //触发元素的class
var countInout = this.getElementsByTagName('input')[1]; // 数目input
var value = parseInt(countInout.value); //数目
//通过判断触发元素的class确定用户点击了哪个元素
switch (cls) {
case 'add': //点击了加号
countInout.value = value + 1;
getSubtotal(this);
case 'reduce': //点击了减号
if (value & 1) {
countInout.value = value - 1;
getSubtotal(this);
case 'delete': //点击了删除
var conf = confirm('确定删除此商品吗？');
if (conf) {
this.parentNode.removeChild(this);
getTotal();
// 给数目输入框绑定keyup事件
tr[i].getElementsByTagName('input')[1].onkeyup = function () {
var val = parseInt(this.value);
if (isNaN(val) || val &= 0) {
if (this.value != val) {
this.value =
getSubtotal(this.parentNode.parentNode); //更新小计
getTotal(); //更新总数
// 点击全部删除
deleteAll.onclick = function () {
if (selectedTotal.innerHTML != 0) {
var con = confirm('确定删除所选商品吗？'); //弹出确认框
if (con) {
for (var i = 0; i & tr. i++) {
// 如果被选中，就删除相应的行
if (tr[i].getElementsByTagName('input')[0].checked) {
tr[i].parentNode.removeChild(tr[i]); // 删除相应节点
i--; //回退下标位置
alert('请选择商品！');
getTotal(); //更新总数
console.log("\u767e\u5ea6\u641c\u7d22\u\u\u56ed\ub\u8f7d\u66f4\u591aJS\u\u4ee3\u7801");
// 默认全选
checkAllInputs[0].checked = true;
checkAllInputs[0].onclick();
阅读(...) 评论()}