数量组件及滚动的数量组件,可直接运行;

1.不滚动:

<!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>
    <style>
    </style>
</head>
<body>
    <script>
        class StepNum{
            constructor(parent,data) {
                this._data = data;
                if(!parent) parent = document.body;
                this.div = this.createDiv(parent);
            }
            createDiv(parent){
                if(this.div) return this.div;
                let div = document.createElement('div');
                div.className = 'quantity-form';
                div.evt = new Event(StepNum.CHANGENUM);
                 Object.assign(div.style,{
                     fontSize: '0',
                textAlign: 'center'
                 })
                 this.leftBtn = this.createBtn(div);
                 this.leftBtn.className = 'reduce';
                 this.leftBtn.textContent = '-';
                 this.leftBtn.disabled = true;
                 this.createNumInput(div);
                 // let input = this.createNumInput(div);
                 this.rightBtn = this.createBtn(div);
                 this.rightBtn.className = 'increase';
                 this.rightBtn.textContent = '+';
                 // this.leftBtn.input =  input;
                 // this.rightBtn.input = input;
                 div.self = this;
                 parent.appendChild(div);
                 return div;
            }
            createBtn(parent){
                let btn = document.createElement('button');
                let btnStyle = {
                    outline: 'none',
                    border:'1px solid #ddd',
                    padding:'0',
                    height: '22px',
                    width: '17px',
                    cursor:'pointer'
                };
                Object.assign(btn.style,btnStyle);
                parent.appendChild(btn);
                // 改变数据时将数据抛出;
                btn.addEventListener('click',this.clickHandler);
                return btn;
            }
            clickHandler(e){
                // 点击加减
                if(this === this.parentNode.self.leftBtn){
                    this.parentNode.children[1].value -= 1;
                    if(this.parentNode.children[1].value==='1'){
                        this.disabled = true;
                    }
                }else{
                    this.parentNode.children[1].value = parseInt(this.parentNode.children[1].value)+1;
                    if(this.parentNode.children[1].value!=='1'){
                        this.parentNode.children[0].disabled = false;
                    }
                }
                // 抛出
                this.parentElement.evt.data = this.parentNode.self._data;
                this.parentElement.evt.num = this.parentNode.children[1].value;
                document.dispatchEvent(this.parentElement.evt);
            }
            createNumInput(parent){
                let input = document.createElement('input');
                input.value = 1;
                Object.assign(input.style,{
                    outline: 'none',
                    textAlign: 'center',
                    padding:'0',
                    boxSizing: 'border-box',
                    border:'1px solid #ddd',
                    height: '22px',
                    width: '46px',
                    borderLeftWidth: '0',
                    borderRightWidth: '0',
                }),
                parent.appendChild(input);
                input.addEventListener('blur',this.blurHandler);
                return input;
            }
            blurHandler(e){
                // 改变数据时将数据抛出;
                // 是数字 且大于1
                if(isNaN(this.value) || parseInt(this.value)<1){
                    this.parentNode.self.createNote(document.body);
                    this.value = 1;
                    this.parentNode.self.leftBtn.disabled = true;
                }else if(this.value === '1'){
                    this.parentNode.self.leftBtn.disabled = true;
                }else{
                    this.parentNode.self.leftBtn.disabled = false;
                }
                this.parentElement.evt.data = this.parentNode.self._data;
                this.parentElement.evt.num = this.parentNode.children[1].value;
                document.dispatchEvent(this.parentElement.evt);
            }
            createNote(parent,text='商品数量超限'){
                let div = document.createElement('div');
                Object.assign(div.style,{
                    backgroundColor: '#fff',
                border: '1px solid #ddd',
                textAlign: 'center',
                position: 'fixed',
                zIndex: '1000',
                transform: 'translate(-50%,-50%)',
                left: '50%',
                top: '50%',
                })
                let p = document.createElement('p');
                p.textContent = text;
                p.style.margin = '60px 60px 0';

                let pCon = document.createElement('p');
                pCon.style.margin = '40px';

                let a = document.createElement('a');
                a.addEventListener('click',function () {
                    this.parentElement.parentElement.style.display = 'none';
                })
                Object.assign(a.style,{
                    textDecoration: 'none',
                backgroundColor:'red',
                display: 'inline-block',
                padding: '10px 20px',
                color: 'rgb(255, 255, 255)',
            })
                a.href = 'javascript:;';
                a.textContent = '知道了';
                Object.assign(a.style,{
                    backgroundColor:'red',
                    padding:'10px 20px',
                    color:'#fff',
                })
                pCon.appendChild(a);
                div.appendChild(p);
                div.appendChild(pCon);
                parent.appendChild(div);
            }
            static get CHANGENUM(){
                return 'changenum';
            }
        }
        let num = new StepNum(document.body,{id:1001,icon:"img/03.jpg",goods:"德国DMK进口牛奶 欧德堡(Oldenburger)超高温处理全脂纯牛奶1L*12盒",info:"1L*12",nowPrice:139,initPrice:156,sold:0.5});
        let num1 = new StepNum(document.body,{id:1002,icon:"img/04.jpg",goods:"帮宝适(Pampers)超薄干爽绿帮纸尿裤L164片(9-14kg)大码 尿不湿箱装",info:"L【9-14kg】",nowPrice:225,initPrice:275,sold:0.5});
        document.addEventListener(StepNum.CHANGENUM,changeNumHandler);
        function changeNumHandler(e) {
            console.log(e.data,e.num);
        }
    </script>
</body>
</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>
    <style>
    </style>
</head>
<body>
<script>
    class StepNum{
        constructor(parent,data) {
            this._data = data;
            this.num = 1;
            this.step = 1;
            // this.flag = false;
            if(!parent) parent = document.body;
            this.div = this.createDiv(parent);
            this.animate();
        }
        createDiv(parent){
            if(this.div) return this.div;
            let div = document.createElement('div');
            div.className = 'quantity-form';

            div.evt = new Event(StepNum.CHANGENUM);
            Object.assign(div.style,{
                fontSize: '0',
                textAlign: 'center',
                position: 'absolute',
                overflow: 'hidden',
            })
            let divCon = document.createElement('div');
            let p1 = document.createElement('p');
            p1.textContent = 1;
            // let p2 = document.createElement('p');
            // p2.textContent = 2;
            Object.assign(divCon.style,{
                position: 'absolute',
                top: '0',
                left: '17px',
                width: '47px',
                backgroundColor: '#fff',
                textAlign: 'center',
                fontSize: '13px',
            })
            Object.assign(p1.style,{
                margin: '0',
                lineHeight: '22px',
            })
            divCon.appendChild(p1);
            div.appendChild(divCon);
            this.leftBtn = this.createBtn(div);
            this.leftBtn.className = 'reduce';
            this.leftBtn.textContent = '-';
            this.leftBtn.disabled = true;
            // this.createNumInput(div);
            this.input = this.createNumInput(div);
            this.rightBtn = this.createBtn(div);
            this.rightBtn.className = 'increase';
            this.rightBtn.textContent = '+';
            // this.leftBtn.input =  input;
            // this.rightBtn.input = input;
            this.leftBtn.divCon = divCon;
            this.rightBtn.divCon = divCon;
            divCon.input =this.input;
            this.input.divCon = divCon;
            // divCon.add = true;
            divCon.self = this;
            div.self = this;
            parent.appendChild(div);
            return div;
        }
        setNum(num){
            this.input.value = num;
            this.num = num;
            this.div.firstElementChild.firstElementChild.textContent = num;
            this.evt = new Event(StepNum.CHANGENUM);
            this.evt.data = this._data;
            this.evt.num = num;
            document.dispatchEvent(this.evt);
        }
        createBtn(parent){
            let btn = document.createElement('button');
            let btnStyle = {
                outline: 'none',
                border:'1px solid #ddd',
                padding:'0',
                height: '22px',
                width: '17px',
                cursor:'pointer',
                position:'relative'
            };
            Object.assign(btn.style,btnStyle);
            parent.appendChild(btn);
            // 改变数据时将数据抛出;
            btn.addEventListener('click',this.clickHandler);
            this.end = true;
            return btn;
        }
        clickHandler(e){
            this.divCon.style.opacity = '1';
            if(this.parentNode.self.flag === true)return;
            // 隐藏input的value值
            this.parentNode.self.input.value = '';
            this.parentNode.self.input.style.backgroundColor = 'rgba(255,255,255,.3)';
            // 点击加减
            // 点击 - 就在p的前面增加一个p top 移动到 0px 然后删除最后一个p
            // 点击 + 就在p的后面增加一个p top移动到-22px 然后删除第一个p

            if(this === this.parentNode.self.leftBtn){
                // if(this.parentNode.self.num<2){
                //     this.disabled = true;
                //     return;
                // };
                this.divCon.style.top = '-22px';
            //     this.divCon.flag = false;
                this.parentNode.self.num--;
                let p2 = document.createElement('p');
                Object.assign(p2.style,{
                    margin: '0',
                    lineHeight: '22px',
                })
                p2.textContent =  this.parentNode.self.num;
                this.divCon.insertBefore(p2,this.divCon.firstElementChild);
                this.divCon.add = false;
                if(this.parentNode.self.num===1){
                    this.disabled = true;
                }
            //
            //     this.disabled = false;
            //
            }else{
                // 点击了+

            //     this.divCon.flag = true;
                this.parentNode.self.leftBtn.disabled = false;
                this.parentNode.self.num++;
                let p2 = document.createElement('p');
                Object.assign(p2.style,{
                    margin: '0',
                    lineHeight: '22px',
                })
                p2.textContent =  this.parentNode.self.num;
                this.divCon.add = true;
                this.divCon.appendChild(p2);
                // this.divCon.style.top = '-22px';
            //     // 1s 后删除
            }
            // console.log(this.parentNode.self);
            this.parentNode.self.flag = true;
            // this.parentNode.self.end = false;
            // 抛出
        }
        createNumInput(parent){
            let input = document.createElement('input');
            // input.value = 1;
            Object.assign(input.style,{
                outline: 'none',
                textAlign: 'center',
                padding:'0',
                boxSizing: 'border-box',
                border:'1px solid #ddd',
                height: '22px',
                width: '46px',
                backgroundColor:'rgba(255,255,255,.3)',
                borderLeftWidth: '0',
                borderRightWidth: '0',
                position:'relative',
                color:'rgba(0,0,0,.8)',
                fontSize:'13px'
            }),
            parent.appendChild(input);
            input.addEventListener('blur',this.blurHandler);
            input.addEventListener('focus',this.focusHandler);
            return input;
        }
        focusHandler(e){
            this.value = '';
            this.divCon.style.opacity = '0';
        }
        blurHandler(e){
            // 改变数据时将数据抛出;
            // 是数字 且大于1
            if(isNaN(this.value) || parseInt(this.value)<1 || !this.value){
                this.parentNode.self.createNote(document.body);
                this.parentNode.self.setNum(1);
                // this.value = 1;
                this.parentNode.self.leftBtn.disabled = true;
            }else if(this.value === '1'){
                this.parentNode.self.setNum(1);
                this.parentNode.self.leftBtn.disabled = true;
            }else{
                this.parentNode.self.setNum(this.value);
                this.parentNode.self.leftBtn.disabled = false;
            }
        }
        createNote(parent,text='商品数量超限'){
            let div = document.createElement('div');
            Object.assign(div.style,{
                backgroundColor: '#fff',
                border: '1px solid #ddd',
                textAlign: 'center',
                position: 'fixed',
                zIndex: '1000',
                transform: 'translate(-50%,-50%)',
                left: '50%',
                top: '50%',
            })
            let p = document.createElement('p');
            p.textContent = text;
            p.style.margin = '60px 60px 0';

            let pCon = document.createElement('p');
            pCon.style.margin = '40px';

            let a = document.createElement('a');
            a.addEventListener('click',function () {
                this.parentElement.parentElement.style.display = 'none';
            })
            Object.assign(a.style,{
                textDecoration: 'none',
                backgroundColor:'red',
                display: 'inline-block',
                padding: '10px 20px',
                color: 'rgb(255, 255, 255)',
            })
            a.href = 'javascript:;';
            a.textContent = '知道了';
            Object.assign(a.style,{
                backgroundColor:'red',
                padding:'10px 20px',
                color:'#fff',
            })
            pCon.appendChild(a);
            div.appendChild(p);
            div.appendChild(pCon);
            parent.appendChild(div);
        }
        static get CHANGENUM(){
            return 'changenum';
        }
        animate(){
            requestAnimationFrame(this.animate.bind(this));
            // 当点击了按钮时 改变flag;
            if(!this.flag)return;
            if(this.div.firstElementChild.add){
                // +
                if(this.div.firstElementChild.offsetTop<= -22){
                    this.flag = false;
                    this.div.firstElementChild.firstElementChild.remove();
                    this.div.firstElementChild.style.top = '0';
                    this.div.evt.data = this._data;
                    this.div.evt.num = this.div.firstElementChild.firstElementChild.textContent;
                    document.dispatchEvent(this.div.evt);
                    return;
                }
                this.div.firstElementChild.style.top = this.div.firstElementChild.offsetTop-this.step+'px';
            }else{
                // -
                if(this.div.firstElementChild.offsetTop >= 0){
                    this.flag = false;
                    this.div.firstElementChild.lastElementChild.remove();
                    this.div.firstElementChild.style.top = '0';
                    this.div.evt.data = this._data;
                    this.div.evt.num = this.div.firstElementChild.firstElementChild.textContent;
                    document.dispatchEvent(this.div.evt);
                    return;
                }
                this.div.firstElementChild.style.top = this.div.firstElementChild.offsetTop+this.step+'px';
            }
        }
    }
    let num = new StepNum(document.body,{id:1001,icon:"img/03.jpg",goods:"德国DMK进口牛奶 欧德堡(Oldenburger)超高温处理全脂纯牛奶1L*12盒",info:"1L*12",nowPrice:139,initPrice:156,sold:0.5});
    document.addEventListener(StepNum.CHANGENUM,changeNumHandler);
    function changeNumHandler(e) {
        console.log(e.data,e.num);
    }
</script>
</body>
</html>

在滚动时,由于需要频繁的修改top值所以不能使用transition实现,而是改用animate方法;

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值