35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图
for循环中监听函数中打印变量
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮</button><script>var btnEl = document.querySelector("button")var message = "Hello World"/*for1: var name = kobe + 0for2: var name = kobe + 1for3: var name = kobe + 2for4: var name = kobe + 3for5: var name = kobe + 4*/for (var i = 0; i < 5; i++) {console.log("---------")var name = "kobe" + ibtnEl.onclick = function() {console.log(i)console.log(message)console.log(name)}}message = "哈哈哈哈哈"console.log(i) // 5console.log(name)</script></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button></div><script>// 强调: 代码的执行顺序var btnEls = document.querySelectorAll("button")// [btn1, btn2, btn3, btn4]/*for1: var btnItemEl = btnEls[0]btn1.index = 0btnItemEl.onclick = function() {}for2: var btnItemEl = btnEls[1]btn2.index = 1for3: var btnItemEl = btnEls[2]btn3.index = 2for4: var btnItemEl = btnEls[3]btn4.index = 3*/// 对每一个按钮的点击进行监听for (var i = 0; i < btnEls.length; i++) {var btnItemEl = btnEls[i]btnItemEl.index = idebuggerbtnItemEl.onclick = function() {debuggerconsole.log(i)console.log(btnItemEl)// 怎么样在这里能拿到对应的btnItemEl// 方案一: 直接获取thisconsole.log(this)// 方案二: 先获取索引console.log(this.index)}}console.log(i) // 4console.log(btnItemEl)</script></body>
</html>华为商城-整体项目的概览
华为商城-导航-操作界面搭建
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.crumbs {height: 63px;line-height: 63px;font-size: 12px;}.crumbs .item {cursor: pointer;}.crumbs .item:last-child {color: #000;}.operation {padding: 0 24px;background-color: #fff;}.operation > .row {display: flex;}.operation > .row .item {width: 104px;height: 48px;line-height: 48px;font-size: 12px;color: #000;cursor: pointer;}.operation > .row .item:first-child {color: #666;cursor: auto;}.operation > .row .item.active {color: red;}/* 商品列表 */.products {margin-top: 20px;display: flex;flex-wrap: wrap;justify-content: space-between;}.products > .item {width: 291px;background-color: #fff;margin-bottom: 12px;}.products > .item a {display: flex;flex-direction: column;align-items: center;}.products > .item .album {width: 180px;height: 180px;margin: 30px 0;}.products > .item .name {font-weight: 700;color: #000;}.products > .item .discount {margin: 10px 0 16px;color: #666;}.products > .item .price {font-size: 16px;font-weight: 700;color: red;}.products > .item .service {display: flex;justify-content: center;margin: 10px 0;}.products > .item .service .tip {margin: 0 3px;padding: 0 3px;border: 1px solid red;border-radius: 3px;font-size: 12px;color: red;}.products > .item .comment {display: flex;justify-content: center;margin-bottom: 12px;}.products > .item .comment span {margin: 0 5px;font-size: 12px;color: #666;}</style>
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li></ul></div></body>
</html>
华为商城-动态商品列表的展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"><!-- <li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li> --></ul></div><script src="./json/product_data.js"></script><script>// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")for (var i = 0; i < resultList.length; i++) {// console.log(resultList[i]) // -> item// 获取一条数据var resultItem = resultList[i]// 将一条数据转成界面一个item// 1.1. 最外层的itemvar itemEl = document.createElement("li")itemEl.classList.add("item")productsEl.append(itemEl)// 1.2. 创建a元素var aEl = document.createElement("a")aEl.href = "#"itemEl.append(aEl)// 1.3. 添加imgvar albumEl = document.createElement("img")albumEl.classList.add("album")albumEl.src = `${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}`aEl.append(albumEl)// 1.4. 创建namevar nameEl = document.createElement("div")nameEl.classList.add("name")nameEl.textContent = resultItem.nameaEl.append(nameEl)// 1.5. 创建discountvar discountEl = document.createElement("div")discountEl.classList.add("discount")discountEl.textContent = resultItem.promotionInfoaEl.append(discountEl)// 1.6. 创建pricevar priceEl = document.createElement("div")priceEl.classList.add("price")priceEl.textContent = "¥" + resultItem.priceaEl.append(priceEl)// 1.7. 创建servicevar serviceEl = document.createElement("div")serviceEl.classList.add("service")for (var label of resultItem.promoLabels) {var tipEl = document.createElement("span")tipEl.classList.add("tip")tipEl.textContent = labelserviceEl.append(tipEl)}aEl.append(serviceEl)// 1.8 创建commentvar commentEl = document.createElement("div")commentEl.classList.add("comment")var countEl = document.createElement("span")countEl.textContent = `${resultItem.rateCount}人评论`commentEl.append(countEl)var goodEl = document.createElement("span")goodEl.textContent = `${resultItem.goodRate}% 好评`commentEl.append(goodEl)aEl.append(commentEl)}</script>
</body>
</html>华为商城-动态商品列表的展示（重构）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script>// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")showResultListAction()function showResultListAction() {for (var i = 0; i < resultList.length; i++) {// 获取一条数据var resultItem = resultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}}</script>
</body>
</html>华为商城-服务优惠的点击处理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script>// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")for (var i = 0; i < resultList.length; i++) {// 获取一条数据var resultItem = resultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}// 2.服务优惠的赛选var operationEl = document.querySelector(".operation")var discountEl = operationEl.querySelector(".discount")// 定义变量, 用户记录选中的服务var discountFilters = []for (var i = 1; i < discountEl.children.length; i++) {// 获取对应的discountItemElvar discountItemEl = discountEl.children[i]// 监听discountItemEldiscountItemEl.onclick = function() {// 在active和非active切换this.classList.toggle("active")// 判断是否将关键字添加或者从discountFilters移除掉if (this.classList.contains("active")) {discountFilters.push(this.textContent.trim())} else {var filterItem = this.textContent.trim()var filterIndex = discountFilters.findIndex(function(item) {return item === filterItem})discountFilters.splice(filterIndex, 1)}console.log(discountFilters)}}</script>
</body>
</html>华为商城-服务优惠的点击过滤展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script src="./js/utils.js"></script><script>/*1.获取服务优惠中的item2.监听item的点击* 切换active3.根据item的点击获取filterItem* 将其放在一个数组中4.根据最新的filter, 过滤数据* filterResultListAction5.根据过滤的最新数据进行展示* showResultListAction*/// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")// 2.服务优惠的赛选var operationEl = document.querySelector(".operation")var discountEl = operationEl.querySelector(".discount")// 定义变量, 用户记录选中的服务var discountFilters = []for (var i = 1; i < discountEl.children.length; i++) {// 获取对应的discountItemElvar discountItemEl = discountEl.children[i]// 监听discountItemEldiscountItemEl.onclick = function() {// 在active和非active切换this.classList.toggle("active")// 判断是否将关键字添加或者从discountFilters移除掉if (this.classList.contains("active")) {discountFilters.push(this.textContent.trim())} else {var filterItem = this.textContent.trim()var filterIndex = discountFilters.findIndex(function(item) {return item === filterItem})discountFilters.splice(filterIndex, 1)}// 过滤resultListfilterResultListAction()}}// 封装函数: 过滤resultList数据var showResultList = resultListfunction filterResultListAction() {// 1.过滤数据showResultList = resultList.filter(function(item) {var isFlag = truefor (var filterItem of discountFilters) {if (!item.services.includes(filterItem)) {isFlag = falsebreak}}return isFlag})// 2.重新展示数据showResultListAction()}// 封装函数: 通过for循环, 展示数据showResultListAction()function showResultListAction() {productsEl.innerHTML = ""for (var i = 0; i < showResultList.length; i++) {// 获取一条数据var resultItem = showResultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}// 添加空的itemaddProductsEmptyItem()}</script>
</body>
</html>华为商城-轮播图界面基本搭建
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.banner .images {position: relative;}.banner .images .item {position: absolute;left: 0;top: 0;width: 100%;overflow: hidden;opacity: 0;}.banner .images .item.active {opacity: 1;}.banner .images .item img {position: relative;transform: translate(-50%);left: 50%;width: 1920px;height: 550px;}</style>
</head>
<body><div class="banner"><ul class="images"></ul><div class="control"><button>上一个</button><button>下一个</button></div><div class="indicator"></div></div><script src="./json/banner_data.js"></script><script>// 0.banner的serverURLvar bannerServerURL = "https://res.vmallres.com/"// 1.动态添加轮播图图片数据var imagesEl = document.querySelector(".images")var activeItemEl = nullfor (var i = 0; i < banners.length; i++) {// 获取数据var banner = banners[i]// 创建li元素var itemEl = document.createElement("li")itemEl.classList.add("item")if (i === 0) {itemEl.classList.add("active")activeItemEl = itemEl}imagesEl.append(itemEl)// 创建img元素var imgEl = document.createElement("img")imgEl.src = `${bannerServerURL}${banner.imgUrl}`itemEl.append(imgEl)}</script></body>
</html>华为商城-李轮播图的自动轮播效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.banner .images {position: relative;height: 550px;}.banner .images .item {position: absolute;left: 0;top: 0;width: 100%;overflow: hidden;opacity: 0;transition: opacity 1000ms ease;}.banner .images .item.active {opacity: 1;}.banner .images .item img {position: relative;transform: translate(-50%);left: 50%;width: 1920px;height: 550px;}</style>
</head>
<body><div class="banner"><ul class="images"></ul><div class="control"><button class="prev">上一个</button><button class="next">下一个</button></div><div class="indicator"></div></div><script src="./json/banner_data.js"></script><script>var bannersCount = banners.length// 0.banner的serverURLvar bannerServerURL = "https://res.vmallres.com/"// 1.动态添加轮播图图片数据var imagesEl = document.querySelector(".images")var activeItemEl = nullfor (var i = 0; i < banners.length; i++) {// 获取数据var banner = banners[i]// 创建li元素var itemEl = document.createElement("li")itemEl.classList.add("item")if (i === 0) {itemEl.classList.add("active")activeItemEl = itemEl}imagesEl.append(itemEl)// 创建img元素var imgEl = document.createElement("img")imgEl.src = `${bannerServerURL}${banner.imgUrl}`itemEl.append(imgEl)}// 2.监听按钮的点击var previousIndex = 0var currentIndex = 0var controlEl = document.querySelector(".control")var prevBtnEl = controlEl.querySelector(".prev")var nextBtnEl = controlEl.querySelector(".next")prevBtnEl.onclick = function() {// 找到上一个previousIndex = currentIndexcurrentIndex--if (currentIndex === -1) {currentIndex = bannersCount - 1}// 让currentIndex变成active状态, 让previous变成普通的状态switchBannerItem()}nextBtnEl.onclick = function() {nextSwitch()}// 3.自动轮播效果var timer = nullstartTimer()// 4.暂停自动轮播imagesEl.onmouseenter = function() {console.log("------onmouseenter")stopTimer()}imagesEl.onmouseleave = function() {startTimer()}// 对功能封装的函数// 封装到函数: switchBannerItemfunction switchBannerItem() {var currentItemEl = imagesEl.children[currentIndex]var previousItemEl = imagesEl.children[previousIndex]previousItemEl.classList.remove("active")currentItemEl.classList.add("active")}// 封装到函数: 播放下一个function nextSwitch() {// 找到下一个previousIndex = currentIndexcurrentIndex++if (currentIndex === bannersCount) {currentIndex = 0}// 让currentIndex变成active状态, 让previous变成普通的状态switchBannerItem()}// 封装到函数: 开启定时器function startTimer() {timer = setInterval(function() {nextSwitch()}, 3000);}function stopTimer() {console.log("timer:", timer)clearInterval(timer)}</script></body>
</html>商品列表-服务优惠-排序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active" data-key="default">综合</li><li class="item" data-key="goodRate">好评</li><li class="item" data-key="rateCount">评论数</li><li class="item" data-key="price">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script src="./js/utils.js"></script><script>/*1.监听排序item的点击2.排他效果* 点击item的active* 之前的item取消active3.获取点击的信息(比如评论数/好评/价格)4.根据点击信息, 对数据进行排序* default情况* 有key的情况* 特别注意: 不能修改源数组5.根据排序之后的数据, 重新展示页面*/// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")// 2.服务优惠的赛选var operationEl = document.querySelector(".operation")var discountEl = operationEl.querySelector(".discount")// 定义变量, 用户记录选中的服务var discountFilters = []for (var i = 1; i < discountEl.children.length; i++) {// 获取对应的discountItemElvar discountItemEl = discountEl.children[i]// 监听discountItemEldiscountItemEl.onclick = function() {// 在active和非active切换this.classList.toggle("active")// 判断是否将关键字添加或者从discountFilters移除掉if (this.classList.contains("active")) {discountFilters.push(this.textContent.trim())} else {var filterItem = this.textContent.trim()var filterIndex = discountFilters.findIndex(function(item) {return item === filterItem})discountFilters.splice(filterIndex, 1)}// 过滤resultListfilterResultListAction()}}// 3.监听排序功能var sortEl = document.querySelector(".sort")var activeItemEl = sortEl.querySelector(".active")// var sortKeys = ["default", "goodRate", "rateCount", "price"]for (var i = 1; i < sortEl.children.length; i++) {var sortItemEl = sortEl.children[i]sortItemEl.index = isortItemEl.onclick = function() {// 1.取消之前的, 添加新的activeactiveItemEl.classList.remove("active")this.classList.add("active")activeItemEl = this// 2.获取信息var sortKey = this.dataset.key// 3.根据key, 对数据进行排序sortResultListAction(sortKey)}}// 封装函数: 过滤resultList数据var showResultList = [].concat(resultList)function filterResultListAction() {// 1.过滤数据showResultList = resultList.filter(function(item) {var isFlag = truefor (var filterItem of discountFilters) {if (!item.services.includes(filterItem)) {isFlag = falsebreak}}return isFlag})// 2.重新展示数据showResultListAction()}// 封装函数: 通过for循环, 展示数据showResultListAction()function showResultListAction() {productsEl.innerHTML = ""for (var i = 0; i < showResultList.length; i++) {// 获取一条数据var resultItem = showResultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}// 添加空的itemaddProductsEmptyItem()}// 封装函数: 通过key进行排序function sortResultListAction(key) {if (key === "default") {filterResultListAction()} else {showResultList.sort(function(item1, item2) {return item2[key] - item1[key]})}showResultListAction()}</script>
</body>
</html>相关文章：
35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图
for循环中监听函数中打印变量 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…...
详细描述以太坊的gas、gaslimit、gasPrice
目录 一、Gas 是什么？ ✅ 简要定义： 🧠 举例理解： 二、Gas Limit 是什么？ ✅ 简要定义： 分两种： 举例说明： 三、Gas Price 是什么？ ✅ 简要定义： 为什么它重要？ 示例： 四、 EIP-1559 后的新机制（伦敦升级） 三个要素： 五、额外技巧（开发实用） 本文…...
【Java】Maven
一、概念 是一个项目管理和构建工具，它基于项目对象模型（POM）的概念，通过一小段描述信息来管理项目的构建。 二、Maven坐标 <groupId>com.itheima</groupId><artifactId>maven-project01</artifactId>&…...
PageCache
目录 一、PageCache的具体过程 二、具体实现代码 一、PageCache的具体过程 页缓存主要解决的是内存外碎片问题，并且直接和系统调用打交道。 申请过程如下： 当中心缓存中没有内存时,会去页缓存申请一个span结构,要经过下面几步: （1…...
Vue3实战五、面包屑，收缩菜单，高亮暗黑主题切换,全屏功能实现
目录 面包屑，收缩菜单，黑夜白夜样式,全屏功能实现收缩菜单按钮结合pinia功能实现第一步、定义布局配置的数据类型第二步、创建布局状态管理文件第三步、使用布局配置状态第四步、进行展开/收起左侧菜单逻辑第五步、动态切换左侧菜单宽度样式第六步、动态…...
Linux内核设计——（二）进程调度
目录 一、进程调度简介 二、多任务 三、调度器 3.1 I/O消耗型和处理器消耗型进程 3.2 进程优先级 3.3 CFS算法 3.4 实时调度策略 3.5 SCHED_FIFO 3.6 SCHED_RR 3.7 调度器入口 四、上下文切换 4.1 睡眠和唤醒 4.2 need_resched标志 4.3 用户抢占 4.4 内核抢占 一…...
【C++初阶】--- string类模拟实现
1.基础函数 1.1成员函数 成员函数主要是_str、_size、_capacity这三个。npos是size_t 的最大值,用于当作后续成员函数的参数的缺省值。 class string { private:char* _str nullptr;//指向字符串的指针size_t _size 0;//字符串长度size_t _capacity 0;//空间大小static c…...
Pythia 使用说明
Pythia 是一个由非营利研究组织 EleutherAI 开发的开源语言模型套件，专注于透明性和可复现性。它是为了推动自然语言处理（NLP）领域的开放研究而设计，尤其在模型训练过程和性能分析方面提供了详尽的文档和数据。 Pythia 的核心特点…...
python：获取某路径下所有图片的名称
可以使用 Python 的 os 模块或者 pathlib 模块来获取指定路径下所有图片的名称。以下是使用这两种方法实现的代码示例： 使用 os 模块 import osdef get_image_names_os(path):image_extensions (.jpg, .jpeg, .png, .gif, .bmp)image_names []for root, dirs, f…...
一个开源的 VS Code 大模型聊天插件：Light-at
这篇文章是一个开发杂谈。对于有经验的开发者来说，可能这个项目并不算特别复杂或者高技术，只是对我个人来说算一个里程碑，因此写篇杂谈文章记录一下。也许也能给起步者一些参考。 项目地址：https://github.com/HiMeditator/light-…...
图论学习笔记2
请先阅读图论学习笔记 1。 在这篇文章里，我们将继续以前 tarjan 求解的强连通分量和双连通分量，讲解其缩点相关内容。 也会讲解一些特殊的图：基环树与仙人掌图、最小树形图。 缩点 我们知道，将强连通分量、双连通分量缩点之后…...
蓝桥杯备赛---真题训练之15届省赛产品360度展示
题目 介绍 在电子商务网站中，用户可以通过鼠标或手势交互实现 360 度全方位查看产品，提升用户体验。现在需要你设计一个 Pipeline 管道函数，用于控制 360 度展示产品的动画序列，通过管道连接各个动画步骤，使产品以流畅…...
图论：单源最短路（BF算法+迪杰斯特拉算法+spfa算法）
单源最短路 概念 dijkstra实现（解决不了负权值） P3371 【模板】单源最短路径（弱化版） - 洛谷 #include<iostream> #include<vector> #include<cstring> using namespace std;typedef pair<int, int> PII…...
-TTS语音模块FT-VBM-OS支持ModbusRTU)
嵌入式学习(35)-TTS语音模块FT-VBM-OS支持ModbusRTU
一、概述 FT-TTS-R-01 （下简简“模块”）是一款可将串口传入的文本信息转成语音播报的控制器。块”可下接收任意字 符或者汉字，并通过 TTS 语音合成功能，清晰、准确、自然的合成并播放音频。该块”还带有 1 路继电器输出࿰…...
【Vue-组件】学习笔记
目录 <<回到导览组件1.项目1.1.Vue Cli1.2.项目目录1.3.运行流程1.4.组件的组成1.5.注意事项 2.组件2.1.组件注册2.2.scoped样式冲突2.3.data是一个函数2.4.props详解2.5.data和prop的区别 3.组件通信3.1.父子通信3.1.1.父传子（props）3.1.2.子传父…...
Github上一些使用技巧（缩写、Issue的Highlight）自用
1. GIthub中的一些缩写 LGTM ! 最近经常看到一些迷之缩写，感觉挺有意思的，但是有时候看到一些没见过的缩写还是有点懵逼，不过缩写确实也是很方便去review，这里就记录汇总一下；顺便加了一些git的基操单词（加…...
【团体程序涉及天梯赛】L1~L2实战反思合集（C++）
实战反思汇总记录 仔细审题，想好再写 L1-104 九宫格 - 团体程序设计天梯赛-练习集 易忽略的错误：开始习惯性地看到n就以为是n*n数组了，实际上应该是9*9的固定大小数组，查了半天没查出来 L1-101 别再来这么多猫娘了！…...
ubuntu下的node.js的安装
安装 node-v22.14.0-linux-x64.tar.xz 的步骤如下： 1. 下载和解压 如果尚未下载文件，可以通过 wget 下载（替换为实际下载链接）： wget https://nodejs.org/dist/v22.14.0/node-v22.14.0-linux-x64.tar.xz解压文件&…...
.cdr)
VMware-workstation-full-12.5.2 install OS X 10.11.1(15B42).cdr
手把手虚拟机安装苹果操作系统 VMware_workstation_full_12.5.2 unlocker208 Apple Max OS X(M）-CSDN博客 vcpu-0:VERIFY vmcore/vmm/main/physMem_monitor.c:1180 FILE: FileCreateDirectoryRetry: Non-retriable error encountered (C:\ProgramData\VMware): Cann…...
Linux下创建svn库 和 svn安装与操作
1.介绍 SVN是Subversion的简称，是一个开放源代码的版本控制系统，相较于RCS、CVS，它采用了分支管理系统，它的设计目标就是取代CVS。适合中小公司的开发人员不多的项目使用,相比git管理工具更简单. 2.安装svn 2.1 国际惯例 首先看…...
React-04React组件状态（state），构造器初始化state以及数据读取，添加点击事件并更改state状态值
1.React组件状态（state） 组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。 注意 组件中render方…...
第3课：MCP协议接口定义与开发实践
MCP协议接口开发实战：从标准化设计到跨语言SDK落地 一、引言：为什么接口标准化是多智能体协作的“刚需” 在多智能体系统中，不同语言开发的智能体、异构服务之间的通信效率往往受制于接口兼容性问题。MCP（Model Context Protoco…...
Perl语言的WebAssembly
Perl语言的WebAssembly：将古老的语言带入新世纪 引言 在编程语言发展的历史长河中，Perl作为一门早期广泛使用的脚本语言，以其灵活性和丰富的文本处理能力而闻名。然而，随着互联网和Web技术的迅猛发展，许多开发者开始…...
[ISP] ISP 中的 GTM 与 LTM：原理、算法与与 Gamma 校正的对比详解
在现代图像信号处理（ISP）流水线中，图像增强是提升视觉质量的核心手段之一。尤其是在高动态范围（HDR）内容、弱光环境或复杂光照条件下，Tone Mapping（色调映射）技术的引入成为关键。To…...
)
健身管理小程序|基于java微信开发健身管理小程序的系统设计与实现(源码+数据库+文档)
健身管理小程序目录 基于微信开发健身管理小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 小程序端： 后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍：✌️大厂码…...
批量将文本合并成单个文件，支持按文件夹合并文本文档
我们的文件夹中有零零碎碎的多个小的文本文件，这对我们存档记录是非常不方便，不友好的。如果我们能够将多个小的文本文件合并成一个完整的大的文本文件，那不管是在共享还是在存档起来都更加的方便。今天给大家介绍一下如何批量将多个文本文件…...
ROS云课三分钟-差动移动机器人巡逻报告如何撰写-中等报告
评语： 成绩中等（70/100），具体如下： 1. 摘要部分 问题描述： 内容空洞：摘要过于简短，仅简要概述了研究内容和实现方法，未突出研究的创新点或重要性。缺乏细节࿱…...
forms实现推箱子小游戏
说明: forms实现推箱子小游戏 效果图： step0:游戏规则 # 推箱子游戏规则说明## 🎯 游戏目标 - 通过控制角色移动，将所有**棕色箱子(3)**推到**红色目标点(4)**上 - 当所有箱子都变为**绿色(7)**时，即完成当前关卡 - 完成全部关…...
图的储存+图的遍历
图的存储 邻接矩阵 #include <iostream>#include <cstring>using namespace std;const int N 1010;int n, m;int edges[N][N];int main() {memset(edges, -1, sizeof edges);cin >> n >> m; // 读⼊结点个数以及边的个数 for(int i 1; i < m; i)…...
)
蓝桥杯—数字接龙(dfs+减枝)
一.题目 二.思路 一看就是迷宫问题的变种，从左上角到达右下角，要解决 1.8个方向的方向向量，用dx，dy数组代表方向向量 2.要按照一个规律的数值串进行搜索0，1，2，k-1，0，1…...
Solidity智能合约漏洞类型与解题思路指南
一、常见漏洞类型与通俗解释 1. 重入攻击(Reentrancy) 🌀 通俗解释：就像你去银行取钱，柜台人员先给你钱，然后再记账。你拿到钱后立即又要求取钱，由于账还没记，柜台又给你一次钱，这样循环下去你就能拿走银行所有的钱。 漏洞原理：合约在更新状态前调用外部合约，允许…...
临床 不等于 医学-《分析模式》漫谈52
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 “Analysis Patterns”的第4章“企业财务观察”有这么一句话： An important point about this model——a reflection of its clinical background 2004（机械…...
鸿蒙应用开发中的 Stack 布局模式
在鸿蒙(HarmonyOS)应用开发中，Stack 布局模式是一种非常灵活的布局方式，类似于其他开发框架中的 StackPanel 或 AbsoluteLayout。它允许子组件按照层级关系进行堆叠，后添加的组件会覆盖在先添加的组件之上。开发者可以通过设置组件的位置、大…...
仿modou库one thread one loop式并发服务器
源码：田某super/moduo 目录 SERVER模块： Buffer模块： Socket模块： Channel模块： Connection模块： Acceptor模块： TimerQueue模块： Poller模块： EventLoop模块&a…...
【AI学习】初步了解Gradio
Gradio 是一个开源的 Python 库，专注于快速构建交互式 Web 界面，特别适用于机器学习模型、数据科学项目或任意 Python 函数的演示与部署。它通过极简的代码实现前后端一体化，无需前端开发经验即可创建功能丰富的应用。以下是 Gradio 的核心特…...
C++11QT复习 （十四）
文章目录 Day9 数据结构学习笔记（2025.04.01）一、C基础快速回顾二、STL（标准模板库）三、常见容器及其对应的数据结构四、容器操作演示1. 基本容器使用2. 异构类型容器 五、迭代器详解特点示例用户自定义结构体访问成员 六、算法库…...
ThreadCache
目录 一、Freelist 二、ThreadCache 三、哈希桶映射规则 一、Freelist 在之前整体框架介绍的时候，我们曾说过ThreadCache是一个哈希桶的结构。每一个桶都要存同一个大小的对象块（即最小块的内存）。 那么我们使用FreeList来…...
c++中同步和异步，阻塞和非阻塞原理以及机制
在C中，同步与异步、阻塞与非阻塞是并发编程中的重要概念，它们描述了程序在执行任务时的行为模式。理解这些概念对于设计高效、响应良好的并发程序至关重要。下面我将详细介绍这些概念的原理和机制。 1. 同步与异步 同步（Synchronous&#x…...
Python项目打包指南：PyInstaller与SeleniumWire的兼容性挑战及解决方案
前言 前段时间做一个内网开发的需求，要求将selenium程序打包成.exe放在内网的win7上运行，在掘金搜了一圈也没有发现相关文章，因此将过程中踩到的坑记录分享一下。 本文涵盖了具体打包操作、不同模块和依赖项的兼容性解决方案，以…...
浅谈微信视频号推荐算法
这次可能会稍微有点干货，但保证不晦涩~ 一、算法推荐的本质：猜你喜欢 vs 社交绑架 视频号的推荐系统本质上在做两件事： 预测你的兴趣：通过你的浏览、点赞、评论、分享等行为，分析你的偏好。满足社交需求&…...
selenium 常用方法
selenium 库的常用方法： 方法说明示例代码webdriver.Chrome()初始化 Chrome 浏览器实例。driver webdriver.Chrome()driver.get(url)访问指定的 URL 地址。driver.get("https://example.com")driver.find_element(By, value)查找第一个匹配的元素。elem…...
springboot中使用async实现异步编程
目录 1.说明 2.实现原理 3.示例 4.总结 1.说明 Async 是 Spring 框架提供的一个注解，用于标记方法为异步执行。被标记的方法将在调用时立即返回，而实际的方法执行将在单独的线程中进行。 Async 注解有一个可选属性：指定要使用的特定线程…...
【2024年蓝桥杯Java B组】省赛真题详细解析
【2024年蓝桥杯Java B组】省赛真题 距离比赛仅剩5天，大多数省份可能完成3-4题即可拿到省奖，2025年想要拿到省奖，需要高效利用时间，重点突破关键知识点和题型。这里以【2024年蓝桥杯Java B组省赛真题】为例，梳理我们最后…...
SQL：DDL（数据定义语言）和DML（数据操作语言）
目录 什么是SQL？ 1. DDL（Data Definition Language，数据定义语言） 2. DML（Data Manipulation Language，数据操作语言） DDL和DML的区别 什么是SQL？ SQL（Structured …...
机器学习核心概念、算法分类与应用场景全解析
文章目录 一、基础任务与算法分类1. 分类任务（监督学习）2. 回归任务（监督学习）3. 聚类任务（无监督学习） 二、关键流程与技术细节1. 数据预处理2. 特征工程3. 数据集划分与评估 三、进阶技术1.深度学习2.强化…...
【leetcode】—416.分割等和子集
✏️ 关于专栏：专栏用于记录 LeetCode 中做题与总结 文章目录 分割等和子集▐ 题目描述▐ 题目示例▐ 题目提示▐ 思路&代码方法：动态规划 分割等和子集 ▐ 题目描述 题目链接：分割等和子集 给你一个 只包含正整数 的 非空 数组 nums …...
jemeter 之mysql驱动问题
问题 java.sql.SQLException: No suitable driver found for jdbc:mysql 解决 先把jar放到lib下 检查 JMeter 的 Classpath 在 JMeter 中，JDBC 驱动需要手动添加到 Classpath 中。 打开 JMeter 安装目录下的 bin/jmeter.properties 文件，找到 user.cla…...
隐私计算的崛起：数据安全的未来守护者
在信息技术（IT）的滚滚浪潮中，一种新兴技术正以惊人速度崭露头角——隐私计算（Privacy-Preserving Computation）。2025 年，随着数据泄露事件频发、全球隐私法规日益严格，以及企业对数据协作需求的…...
Excel计数、求和、统计、计算类函数
目录 一、计数函数1. COUNT2. COUNTA3. COUNTBLANK4. COUNTIF5. COUNTIFS 二、求和函数1. SUM2. SUMIF3. SUMIFS4. SUMPRODUCT 三、统计函数1. AVERAGE2. AVERAGEA3. AVERAGEIF 函数4. AVERAGEIFS 函数 四、其他常用计算函数1. MAX 与 MIN2. RANK3. MOD4. ROUND5. FLOOR6. INT7…...
解决 Kubernetes 中容器 `CrashLoopBackOff` 问题的实战经验
在 Kubernetes 集群中，容器状态为 CrashLoopBackOff 通常意味着容器启动失败，并且 Kubernetes 正在不断尝试重启它。这种状态表明容器内可能存在严重错误，如应用异常、依赖服务不可用、配置错误等。本文将分享一次实际排障过程，并…...