原生js购物车制作

最新推荐文章于 2023-06-30 11:11:40 发布

待你花开

最新推荐文章于 2023-06-30 11:11:40 发布

阅读量250

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47791640/article/details/107467414

版权

这篇博客详细介绍了如何使用原生JavaScript制作购物车。首先通过创建包含商品信息的对象数组，接着利用for循环和字符串拼接方法动态生成HTML内容。在结算页面，通过CSS隐藏并利用事件监听显示和更新商品数量。文章强调了num值在传递和交互中的关键作用，以及如何通过事件处理函数实现加减按钮的功能，并确保商品数量的有效范围。

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

下面视频是成品效果图：

购物车效果图

首先创建对象用数组包裹起来多条对象，对象里面有商品图片，商品名称，商品价格，还有一个num，这个是到后面结算页面交互数据要用到，利用num传参；

var clothes = [{
			img: "img/tu2.png",
			name: "YSL : ",
			price: 20,
			num: 0
		}, {
			img: "img/tu8.png",
			name: "Amani : ",
			price: 19,
			num: 0
		}, {
			img: "img/tu3.png",
			name: "Mac : ",
			price: 10,
			num: 0
		}, {
			img: "img/tu4.png",
			name: "TF : ",
			price: 45,
			num: 0
		}, {
			img: "img/tu5.png",
			name: "Dior : ",
			price: 31,
			num: 0
		}, {
			img: "img/tu9.png",
			name: "纪梵希 : ",
			price: 31,
			num: 0
		}, ];

创建玩数组对象，然后利用for循环遍历数组在for循环内，利用字符串拼接的方式将内容和标签拼接到一起

             //商品详情首页面
        //首先在html页面创建一个空div，用来接收js输出来的内容和标签
        var shops = "";//首先定义一个空的变量,接收所有for循环出来的标签和商品内容
        for (var i = 0; i < clothes.length; i++) {
            var shopping = do