【JavaScript】练习七

最新推荐文章于 2024-04-15 21:33:08 发布

Alex_Madison

最新推荐文章于 2024-04-15 21:33:08 发布

阅读量88

点赞数

分类专栏：作业文章标签： javascript

本文链接：https://blog.csdn.net/Alex_Madison/article/details/125920789

版权

作业专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript和jQuery实现购物车功能，包括页面加载后的金额统计、全选、数量增减及商品删除。同时，详细展示了jQuery实现图片轮播的代码，包括自动切换、鼠标悬停暂停及导航点高亮效果。

摘要由CSDN通过智能技术生成

1、实现购物车
具体功能，1)页面加载成功后，页面的金额，总金额统计完成
2)实现全选
3)点击按钮实现 ± 1
4)删除一行
5)删除所选的多行

$(function(){
	// 全选
	$('#allCheckBox').click(function(){
		var v=$(this).prop('checked');
		$("[name='cartCheckBox']").prop('checked',v);
	});
	$("[alt='minus']").click(function(){
		var v = $(this).next().val();
		if(v==0){
			var one=confirm("不能再减少喽！你是要删除该商品吗？");
			if(one){
				$(this).parents("tr").prev().remove();
				$(this).parents("tr").remove();
			}
		}else{
			$(this).next().val(v-1);
		}
		cal();
	});
	
	// 加一
	$("[alt='add']").click(function(){
		var v = $(this).prev().val();
		$(this).prev().val(parseInt(v)+1);
		cal();
	});
	//删除当前
	$(".cart_td_8 a").click(function(){
		$(this).parents("tr").prev().remove();
		$(this).parents("tr").remove();
		cal();
	});
	
	//删除suoxuan
	$("#deleteAll").click(function(){
		$("[name='cartCheckBox']:checked").each(function(i,e){
			$(e).parents("tr").prev().remove();
			$(e).parents("tr").remove();
		})
	});
	
	cal();
	//计算总金额以及总积分
	function cal(){
		var total=0;
		var sumscore=0;
		$('.cart_td_4').each(function(i,e){
			var score = $(e).text();
			var price = $(e).next().text();
			var num = $(e).parent().find('.num_input').val();
			var all = parseInt(price)*parseInt(num);
			$(e).parent().children('.cart_td_7').text(all);
			total+=all;
			sumscore+=parseInt(score)*parseInt(num);
		});
		$("#total").text(total);
		$("#integral").text(sumscore);
	}
})

2、jQuery实现图片轮播

$(function(){
	 	 $("div img").eq(0).show();
	 	 $("div img").not(":first").hide();
	 	 $("ul li").eq(0).children("span").addClass("a_hover").removeClass("a_nomal");
	 	 $("ul li").mouseover(function(){
	 	 	clearInterval(timer);
	 	 	var index =  $(this).index();
	 	 	showImg(index);
	 	 	i=index;
	 	 }).mouseout(function(){
	 	 	timer = setInterval(fun01,1000);
	 	 });
	 	 function showImg(index){
	 	   var $img = $("div img").eq(index);
	 	   $img.show();
	 	   $("div img").not($img).hide();
	 	   var $li = $("ul li").eq(index);
	 	   $li.children("span").addClass("a_hover").removeClass("a_nomal");
	 	   $("ul li").not($li).children("span").removeClass("a_hover").addClass("a_nomal");
	 	 }
	 	 var i=0;
	 	 function fun01(){
	 	 	showImg(i);
	 	 	i++;
	 	 	if(i==3){
	 	 		i=0;
	 	 	}
	 	 }
	 	 var timer = setInterval(fun01,1000);
	 })