商品列表

最新推荐文章于 2024-06-06 22:18:25 发布

N_ora

最新推荐文章于 2024-06-06 22:18:25 发布

阅读量208

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_33359745/article/details/106787212

版权

商品列表:
html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情页</title>
    <script src="./index.js"></script>
    <style>
</style>
</head>
<body>

<script>
    let list = [
        {id:1001,src:"./img/a.jpg",text:"SNP 燕窝水库补水面膜贴 10片/盒 （男士女士通用护肤化妆品）", nowPrice:109,delPrice:299,percent:0.35},
        {id:1002,src:"./img/b.jpg",text:"林弘堂 去芯莲子干货湖南特产白莲米500g湘潭无芯磨皮湘莲", nowPrice:22.9,delPrice:64.5,percent:0.45},
        {id:1003,src:"./img/c.jpg",text:"荣耀路由Pro光纤宽带大户型穿墙 1200Mbps有线无线双千兆智能无线路由器 支持IPv6", nowPrice:399,delPrice:599,percent:0.75},
        {id:1004,src:"./img/d.jpg",text:"黑白调(Hbada)电脑椅家用办公椅子可躺电竞椅靠背座椅人体工学椅老板椅凳子 白色(脚托)", nowPrice:1090,delPrice:2990,percent:0.15},
        {id:1005,src:"./img/e.jpg",text:"象印ZOJIRUSHI 保温杯不锈钢真空保冷杯车载弹盖男女茶水杯子SM-KZ36/48 AG深蓝色 480ml", nowPrice:49,delPrice:189,percent:0.30},
        {id:1006,src:"./img/f.jpg",text:"TSL谢瑞麟 钻石戒指 18K金玫瑰金镶钻石戒指求婚钻戒（钻共约12分约20颗）BB026 12号圈口", nowPrice:10900,delPrice:29900,percent:0.02},
        {id:1007,src:"./img/h.jpg",text:"汪汪队 迪士尼 儿童羽毛球拍双拍套装幼儿大圆拍小孩户外运动玩具 初学训练拍球拍3-12岁 汪汪队蓝色（一对）", nowPrice:18,delPrice:29,percent:0.50}
    ]

    for(let i  =0;i<list.length;i++){
        let goodItem = new GoodItem(list[i]);
    }
</script>
</body>
</html>

js代码：

class GoodItem{
    constructor(props,parent) {
        this.props = props;
        this.googItem = this.initGood(parent);
        // 不把赋值写里面，将赋值全部删了然后写一个render方法
        // 去掉第一句this.props = props; 直接给函数传参
        // 并且将所有需要传参的 修改为 GoodItem的属性，用于访问
        // this.render(props);
    }
    render(_props){
        // this.googImg.src = _props.src;
        // this.spanPrice.textContent = '￥'+_props.nowPrice;
        // this.spanDelPrice.textContent = '￥'+ _props.delPrice;
        // this.span.width =  _props.percent *100+'%',
        // this.spanPercent.textContent =_props.percent *100+'%';
    }
    initGood(parent){
        if(this.googItem) return  this.googItem;
        let goodItem = document.createElement('div');
        goodItem.className = 'goodItem';
        Object.assign(goodItem.style,{
            width:'290px',
            height:'390px',
            marginLeft:'10px',
            marginBottom:'20px',
            float:'left',
            backgroundColor: 'white',
        })
        this.createInfo(goodItem);
        this.createSnapUp(goodItem);
        if(!parent)parent = document.body;
        parent.appendChild(goodItem);
        return goodItem;
    }
    createInfo(parent){
        let goodInfo = document.createElement('div');
        goodInfo.className = 'goodInfo',
        Object.assign(goodInfo.style,{
            textAlign: 'center',
            height:'330px',
            width:'100%',
        })
        // this.googImg = new Image();
        let goodImg = new Image();
        goodImg.src = this.props.src;
        Object.assign(goodImg.style,{
            marginTop: '20px',
            transition: 'all 1s ease 0s',
        })
        goodImg.addEventListener('mouseenter',this.mouseHandler)
        goodImg.addEventListener('mouseleave',this.mouseHandler)
        goodInfo.appendChild(goodImg);
        let goodMsg = document.createElement('p');
        goodMsg.textContent = this.props.text;
        Object.assign(goodMsg.style,{
            fontSize:'14px',
            fontFamily:'Microsoft YaHei',
            overflow:'hidden',
            height:'40px',
            width:'230px',
            lineHeight:'22px',
            margin:'10px auto 0',
        })
        goodInfo.appendChild(goodMsg);
        parent.appendChild(goodInfo);
    }
    createSnapUp(parent){
        let SnapUp = document.createElement('div');
        SnapUp.className = 'SnapUp';
        Object.assign(SnapUp.style,{
            border:'1px solid rgb(224,18,34)',
            boxSizing :'border-box',
            width:'290px',
            height:'62px',
            position:'relative',
        })
        let snapUpLeft = document.createElement('div');
        Object.assign(snapUpLeft.style,{
            margin:'0 87px 0 5px',
        })
        let div1 = document.createElement('div');
        Object.assign(div1.style,{
            fontSize:'14px'
        })
        let div2 = document.createElement('div');
        Object.assign(div2.style,{
            fontSize:'16px',
            marginLeft:'5px',
            lineHeight: '27px',
        })
        // this.spanPrice = document.createElement('span');
        let spanPrice = document.createElement('span');
        // this.spanDelPrice = document.createElement('span');
        spanPrice.textContent = '￥'+ this.props.nowPrice;
        let spanDelPrice = document.createElement('span');
        spanDelPrice.textContent = '￥'+ this.props.delPrice;
        Object.assign(spanPrice.style,{
           fontSize:'24px',
            color:'rgb(224,18,34)',
        })
        Object.assign(spanDelPrice.style,{
          textDecoration:'line-through',
          marginLeft:'10px',
        })

        let spanPercent = document.createElement('span');
        // this.spanPercent = document.createElement('span');
        spanPercent.textContent =this.props.percent *100+'%';
        let spanProgress = document.createElement('span');
        Object.assign(spanProgress.style,{
            marginLeft:'28px',
            position: 'absolute',
            width:'100px',
            height:'12px',
            border:'1px solid rgb(224,18,34)',
            boxSizing: 'border-box',
            display:'inline-block',
            bottom:'9px',
        })
        let span = document.createElement('span');
        //this.span = document.createElement('span');
        Object.assign(span.style,{
            position: 'absolute',
            width:this.props.percent *100+'%',
            height:'100%',
            backgroundColor:'rgb(224,18,34)',
        })
        spanProgress.appendChild(span);
        div2.appendChild(spanPercent)
        div2.appendChild(spanProgress)
        div1.appendChild(spanPrice);
        div1.appendChild(spanDelPrice);

        let snapUpNow =  document.createElement('div');
        Object.assign(snapUpNow.style,{
            position:'absolute',
            top:'0',
            right:'0',
            textAlign: 'center',
            width:'87px',
            height:'100%',
            backgroundColor:'rgb(224,18,34)'
        })
        let a = document.createElement('a');
        a.textContent = '立即抢购';
        a.href = './demo.html?id='+this.props.id+'&time='+new Date().getTime();
        Object.assign(a.style,{
            textDecoration: 'none',
            lineHeight:'62px',
            color:'#fff',
            display:'block',
            width:'100%',
            height:'100%',
        })
        snapUpNow.appendChild(a);
        snapUpLeft.appendChild(div1);
        snapUpLeft.appendChild(div2);
        SnapUp.appendChild(snapUpLeft);
        SnapUp.appendChild(snapUpNow);

        parent.appendChild(SnapUp);
    }
    mouseHandler(e){
       if(e.type === 'mouseenter'){
           Object.assign(this.style,{
               marginTop :'0px',
               transition:'all 1s ease 0s',
               marginBottom: '20px',
           })
       }else if(e.type === 'mouseleave'){
           Object.assign(this.style,{
               marginTop :'20px',
               transition:'all 1s ease 0s',
               marginBottom: '0px'
           })
       }
    }
}