JS-历史记录练习案例

最新推荐文章于 2022-06-29 13:16:43 发布

麒凌

最新推荐文章于 2022-06-29 13:16:43 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/Linbock/article/details/117087632

版权

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();

麒凌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS-历史记录练习案例

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{ widt
复制链接

扫一扫