移动端购物车全部s+css代码
代码语言:html
所属分类:电商
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=zepto.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
bready(function() {
/*计算总钱数*/
/*给单选框或复选框添加样式*/
hide();
total();
/*编辑*/
$("header span").click(function(){
if ($(this).html()=="编辑") {
$(this).html("完成");
$(".bottom").eq(1).show();
}else{
$(this).html("编辑");
$(".bottom").eq(1).hide();
}
hide();
});
/*编辑*/
/*底部全选*/
$('.bottom-label input').change(function(){
if ($(this).attr("checked")=="checked") {
$(".con input[type='checkbox']").removeAttr("checked");
$(".con input[type='checkbox']").next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
}else{
$(".con input[type='checkbox']").attr("checked","checked");
$(".con input[type='checkbox']").next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
}
checkbox($(this));
})
/*底部全选*/
/*子项全选*/
$('.list input').change(function(){
var $list_input=$(this).parents('.list').next('ul').find('input[type=checkbox]');
if ($(this).attr("checked")==undefined) {
$list_input.attr("checked","checked");
$list_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
}else{
$list_input.removeAttr("checked");
$list_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
}
checkbox($(this));
sum();
})
/*子项全选*/
$("ul input[type='checkbox']").change(function(){
checkbox($(this));
var $ul_input=$(this).parents('ul').prev('.list').find('input');
if($(this).parents('ul').find("input[checked='checked']").length==$(this).parents("ul").children('li').length){
$ul_input.attr("checked","checked");
$ul_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
}else{
$ul_input.removeAttr("checked");
$ul_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
}
sum();
})
/*点击加一*/
$('.btn2').click(function(){
$(this).prev('.number').html(parseInt($(this).prev('.number').html())+1);
/*计算总钱数*/
total();
/*计算总钱数*/
})
/*点击加一*/
/*点击减一*/
$('.btn1').click(function(){
if($(this).next('.number').html()==0)
$(this).next('.number').html(0);
else
$(this).next('.number').html(parseInt($(this).next('.number').html())-1);
/*计算总钱数*/
total();
/*计算总钱数*/
})
/*点击减一*/
$(".number").click(function(){
$('.text1').css({"display":"flex","-webkit-display":"flex"}).attr({'ind':$(this).parents('li').index(),"ind_1":$(this).parents("ul").attr("ind")});
$('.text1 input[type=number]').val($(this).html());
})
$('.text1 input[type="button"]').click(function(){
if($('.text1 input[type=number]').val()==""){
$('.alert').show().html('请输入数量!');
setTimeout(function(){$('.alert').hide();},2000);
return false;
}
if ($('.text1 input[type=number]').val()>100) {
$('.alert').show().html('超出库存了!');
setTimeout(function(){$('.alert').hide();},2000);
return false;
}
$("ul").eq($('.text1').attr('ind_1')).find(".number").eq($('.text1').attr('ind')).html($('.text1 input[type=number]').val());
$('.text1').css({"display":"none","-webkit-display":"none"});
total();
})
/*结算*/
$('.sett').click(function(){
alert("你应付"+$(this).prev("span").html()+"元钱");
});
/*结算*/
/*删除*/
$('.delete').click(function(){
$.each($('li'), function() {
if ($(this).find("input[type=checkbox]").attr("checked")=="checked") {
$(this).remove();
}
});
$('input[type=checkbox]').attr("checked","checked");
$('input[type=checkbox]').next("img").attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
$.each($(".content"), function() {
if ($(this).find("li").length==0) {
$(this).remove();
}
});
hide();
total();
});
/*删除*/
});
function total(){
setTimeout(function(){
var S=0;
$.each($('.total'), function() {
var $ul_total=$(this).prev('ul').find("input[type='checkbox']");
var s=0;
var n1=0;
$.each($(this).prev('ul').find(".number"), function(i) {
if($ul_total.eq(i).attr("checked")=="checked"){
s=s+parseInt($(this).html())*parseInt($(this).parent().prev().html().replace("¥",""));
n1=n1+parseInt($(this).html());
}
});
$(this).children("span").html("¥"+s.toFixed(1));
$(this).children("number").html(n1);
S=S+s;
});
$(".bottom span").html(S.toFixed(1));
},100)
}
/*计算总钱数*/
/*判断有无数据*/
function hide(){
if ($(".content").length==0) {
$(".bottom").hide();
$(".no").css("display","-webkit-box");
return;
}else{
$(".bottom").eq(0).show();
$(".no").css("display","none");
}
}
/*判断有无数据*/
/*判断是否全选*/
function sum(){
if ($("ul input[checked='checked']").length==$("li").length) {
$(".bottom input[type=checkbox]").attr("checked","checked");
$(".bottom input[type=checkbox]").next("img").attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
}else{
$(".bottom input[type=checkbox]").removeAttr("checked");
$(".bottom input[type=checkbox]").next("img").attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
}
}
/*判断是否全选*/
/*给单选框或复选框添加样式*/
function checkbox($this){
if($this.attr('type')=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0