1.CSS 代码!!
* {
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 650px;
position: relative;
background: #000;
background-size: cover;
background-position: 100% 100%;
background-repeat: no-repeat;
}
img{
width: 100%;
vertical-align: middle;
}
.clearfix::after{
display: block;
content: "";
clear: both;
}
.content .singerContent {
margin-top: 100px;
z-index: 100;
position: absolute;
left: 50%;
width: 840px;
margin: 100px 0 0 -390px;
}
#blurBg{
background-image: url("../img/20150718045744409054.jpg");
height: 720px;
}
.content #blurBg {
width: 100%;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
z-index: 9;
filter: blur(90px);
background-repeat: no-repeat;
background-size: cover;
}
.content .album {
width: 262px;
}
.fl{
float: left;
}
.content .songContent {
width: 460px;
min-height: 500px;
margin-top: -7px;
margin-left: 116px;
}
.content .albumImg {
width: 262px;
height: 262px;
margin-bottom: 25px;
}
.content .albumImg img {
border: none;
width: 260px;
height: 260px;
}
.btnDownloadClient {
display: block;
width: 230px;
height: 50px;
background: url(../img/downlaod_bg.png) no-repeat;
cursor: pointer;
}
.content .btnArea2 {
margin-top: 40px;
padding-left: 16px;
}
.btnDownloadClient:hover {
background-position: -231px 0;
}
.content .songContent .songName {
font-size: 24px;
font-style: normal;
color: #fff;
width: 460px;
}
.btnMv {
float: left;
width: 25px;
height: 13px;
margin: 15px 0 0 10px;
}
.icon {
cursor: pointer;
background: url(../img/btn.png) 0 -214px;
background-repeat: no-repeat;
}
.audioName {
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 420px;
}
.content .songContent .songDetail .albumName {
margin-right: 10px;
}
.content .songContent .songDetail .albumName, .content .songContent .songDetail .singerName {
display: block;
width: 225px;
height: 24px;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
color: #fff;
}
.fontColor {
opacity: .6;
}
.content .songContent .songDetail .albumName a ,.content .songContent .songDetail .singerName a {
float: none;
color: #fff;
padding-right: 5px;
}
a {
text-decoration: none;
outline: none;
}
.content .songContent .songWordContent{
outline: 0;
height: 410px;
margin-top: 17px;
overflow: hidden;
font-size: 15px;
color: #fff;
line-height: 30px;
width: 410px;
position: relative;
}
.content .songContent .songWordContent p.playOver{
color: #01e5ff;
opacity: 1;
}
.jspPane{
position: absolute;
transition: top 0.3s linear;
}
.content .songContent .songWordContent p{
width: 420px;
height: 34px;
font-size: 15px;
white-space: normal;
overflow: hidden;
text-overflow:ellipsis;
opacity: 0.6;
display: flex;
}
audio {
width: 300px;
display: block;
margin: 0 auto;
}
.content #blurBg, .content .blurBgMask {
width: 100%;
height: 100%;
opacity: .6;
}
.content .blurBgMask {
background-color: #292a2b;
background-color: rgba(0,0,0,.35);
z-index: 10;
}
2.HTML文件
//思路分析!
<!--
1.点击li标签,生成历史记录
1.1 为li标签,添加点击事件、
1.2 获取点击的这个li标签中的商品信息。
1.3 声明一个数组,把商品信息放入数组中。
1.4 把数组转json字符串,放入localStorage中。
2.历史记录中商品不能重复。如果点击过,把原来的删掉,新的添加到后面。
3.历史记录最多三条。添加第四条的时候,把第一条删除.
3.1添加之前先判断长度,历史记录的长度==3的时候,把第一条删除
3.2 再添加新的一条。
4.打开页面,显示之前的历史记录。
4.1 写一个方法
4.2 从历史记录中获取商品信息数组。
4.3 遍历数组,将拼接好的字符串传入到footprint区域中。
-->
//HTML 代码!
<body>
<img src="img/Snipaste_2021-01-20_10-18-01.png" alt="">
<ul class="item-list">
</ul>
<h1>历史记录</h1>
<ul class="item-list footprint">
</ul>
//外部引入的JS代码及商品简介信息。
<script src="js/data.js"></script>
<script src="js/demo.js"></script>
</body>
3.JS中要查找的商品简介信息。
var dataList = [{
id:1,
imgSrc: "img/1.webp",
title: "SUSISUMMER篙定水波纹羊绒精工直筒裁剪POLO领松紧抽褶短大衣女",
afterCoupon: "4280.00",
oldPrice: "¥4280.00",
sellerInfo: "SUSISUMMER",
sellInfo: "月销 20"
}, {
id:2,
imgSrc: "img/2.webp",
title: "ONLY2021春季新款减龄娃娃领收腰显瘦小黑裙连衣裙女",
afterCoupon: "899.00",
oldPrice: "¥899.00",
sellerInfo: "SUSISUMMER",
sellInfo: "月销 493"
}, {
id:3,
imgSrc: "img/3.webp",
title: "复古连衣裙高端洋气方领拼接通勤纯色高腰长袖长裙女装单件春季",
afterCoupon: "158.00",
oldPrice: "¥198.00",
sellerInfo: "精品时尚靓装",
sellInfo: "月销 2"
}, {
id:4,
imgSrc: "img/4.webp",
title: "2020年秋冬新款复古港风格子法式V领连衣裙女长款韩版格子西装裙",
afterCoupon: "168.00",
oldPrice: "¥198.00",
sellerInfo: "探匠女装",
sellInfo: "月销 1"
}, {
id:5,
imgSrc: 'img/5.webp',
title: 'hego收腰小黑裙显瘦气质裙子女神范蕾丝高端大牌名媛黑色连衣裙秋',
afterCoupon: '¥595.00',
oldPrice: '¥595.00',
sellerInfo: 'hego旗舰店',
sellInfo: '月销 57'
}]
4.JS代码
var itemList = document.querySelector(".item-list");
const footprint = document.querySelector(".footprint");
function createHTML(data) {
var str = "";
for (var i = 0; i < data.length; i++) {
str += `<li class="item">
<a class="item-a" href="#">
<img class="item-img" src="${data[i].imgSrc}">
<div class="item-title">
<span class="title-text">${data[i].title}</span>
</div>
<div class="price-con">
<span class="price-title">¥</span>
<span class="price-afterCoupon">${data[i].afterCoupon}</span>
<span class="price-old">${data[i].oldPrice}</span>
</div>
<div class="seller-info">${data[i].sellerInfo}</div>
<div class="item-footer">
<div class="sell-info">${data[i].sellInfo}</div>
</div>
</a>
</li>`
}
return str;
}
itemList.innerHTML = createHTML(dataList);
// 1.获取所有的商品的li标签。
const items = itemList.querySelectorAll("li");
// 2.绑定点击事件
for (let index = 0; index < items.length; index++) {
items[index].onclick = function () {
// 3.获取商品信息
const obj = dataList[index];
// 6.放入之前,应该先去获取,如果有,追加,没有是新增。
let historyArr = JSON.parse(localStorage.getItem("footHistory"));
if (!historyArr) {
//声明一个数组,把商品信息放入数组中。
historyArr = [];
}
// 添加之前,先看看原来的数据中包不包含这个商品
if (historyArr.length>0) {
for (let index = 0; index < historyArr.length; index++) {
const element = historyArr[index];
if (element.id == obj.id) {
historyArr.splice(index,1);
break;
}
}
}
// 添加之前,再判断历史记录的长度是否超过3个。
if (historyArr.length >= 3) {
// 删除第一个
historyArr.shift();
}
historyArr.push(obj);
localStorage.setItem("footHistory", JSON.stringify(historyArr));
getHistory();
}
}
function getHistory(){
let arr = JSON.parse(localStorage.getItem("footHistory"));
footprint.innerHTML = createHTML(arr);
}
getHistory();