前端商城项目

下载直接可用

项目已经完成，登录注册，购物车，分页，商品列表，徽标，首页轮播图，仿京东倒计时，

class index {
    constructor() {
        //倒计时
        this.Time();
        this.dbge()
    }

// 小红点
    async dbge() {
        let userId = localStorage.getItem('user_id');
        axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
        let { data } = await axios.get('http://localhost:8888/cart/list?id=' + userId);

        try {
            this.$('#bdge').innerHTML = data.cart.length
        } catch (error) {
            // console.log(111);
        }
    }


    //倒计时
    Time() {
        var h;
        var s;
        var min

        let div = document.querySelector('#d1')
        let span = document.querySelectorAll('.span')
        // console.log(span);
        function createDate() {
            var date = new Date();
            // // 年
            var y = date.getFullYear();
            // console.log(y);
            // // 月
            var m = date.getMonth() + 1;
            // console.log(m + 1);
            // // 日
            var d = date.getDate();
            // console.log(d);
            // 时

            h = date.getHours();
            // console.log(h);


            // 分
            min = date.getMinutes();
            // console.log(min);
            // 秒
            s = date.getSeconds();
            // console.log(s);



            let h2 = '';
            h % 2 == 0 ? h2 = h : h2 = h - 1;
            let h3 = h;
            if (h3 % 2 == 0) {
                h3 += 2;

            } else {
                h3 += 1;
            }
            div.innerHTML = `<strong style="font-size:20px">${h2}:00</strong>点专场 火热抢购`;
            function dateDiff(date1, date2) {
                // console.log(li[0]);
                // 默认参数的处理
                var d1 = new Date(date1);
                var d2 = date2 ? new Date(date2) : new Date();

                // console.log(d1);
                // console.log(d2);

                // 得到两个日期之间差的毫秒数
                // var n = Math.abs(d1-d2);
                var n = Math.abs(d1.getTime() - d2.getTime());
                // 根据毫秒数，计算天时分秒

                let s2 = n / 1000
                let s3 = parseInt(s2 % 60)
                let f = parseInt(s2 / 60)
                let f1 = parseInt(f % 60)

                let x = parseInt(f / 60)

                // console.log(x, f1, s3);
                // span[0].innerHTML = x;   


                // console.log(li[2]);
                // let s = n/1000
                if (x < 10) {
                    span[0].innerHTML = '0' + x;
                } else {
                    span[0].innerHTML = x;
                }
                if (f1 < 10) {
                    span[1].innerHTML = '0' + f1;
                } else {
                    span[1].innerHTML = f1;
                }
                if (s3 < 10) {
                    span[2].innerHTML = '0' + s3;
                } else {
                    span[2].innerHTML = s3;
                }
            }
            dateDiff(`${y}/${m}/${d} ${h}:${min}:${s}`, `${y}/${m}/${d} ${h3}:0:0`)

            //  div.innerHTML += a;



        }
        setInterval(createDate, 1000);


        function createZero(num) {
            return num > 10 ? num : '0' + num;
        }


    }
}
new index

下载地址：https://gitee.com/you0524/qianfeng