购物车商品数量选择框实现效果

商品数量选择框

实现效果

js
export default class Utils{
    static ce(type,style){
        let elem=document.createElement(type);
        Object.assign(elem.style,style);
        return elem;
    }
}

import Utils from "./Utils.js";

export default class StepNumber extends EventTarget{
    elem;
    input;
    ids;
    step=1;

    // 构造函数
    constructor(){
        // 当执行constructor就会自动执行createElem()这个方法,并且将返回的结果赋给elem
        this.elem=this.createElem();
    }

    // 创建元素
    createElem(){
        let div=Utils.ce("div",{
            width:"80px",
            height:"22px",
            position:"absolute"
        });
        // 加了this后就可以调用方法了
        this.createBnList(div);
        this.cteateInput(div);
        // 将创建好的div，retrun返回出去
        return div;
    }
    // 创建左右容器
    createBnList(parent) {
        // 创建左边容器，添加内联样式
        var leftBn = Utils.ce("div", {
            width: "15px",
            height: "20px",
            position: "absolute",
            textAlign: "center",
            // 默认事件过滤
            userSelect: "none",
            border: "1px solid #CCCCCC"
        });
        // 创建右边容器，将左边容器的属性和属性值复制给右边容器
        var rightBn = leftBn.cloneNode(false);
        // 单独设置左右容器的定位位置
        leftBn.style.left = "0px";
        rightBn.style.right = "0px";
        // 给容器里面添加文本内容
        leftBn.textContent = "-";
        rightBn.textContent = "+";
        parent.appendChild(leftBn);
        parent.appendChild(rightBn);
        // 给左右两个元素添加点击事件，执行clickHandler函数
        // 用箭头函数写，是为了让函数内的this和外面的this一样
        // 一直监听不删除
        leftBn.addEventListener("click", e => this.clickHandler(e));
        rightBn.addEventListener("click", e => this.clickHandler(e));
    }
    cteateInput(parent) {
        // 全局变量使用this进行调用
        this.input = Utils.ce("input", {
            width: "46px",
            height: "18px",
            position: "absolute",
            left: "17px",
            border: "none",
            textAlign: "center",
            borderTop: "1px solid #CCCCCC",
            borderBottom: "1px solid #CCCCCC"
        });
        // 设置input文本框初始值为1
        this.input.value = "1";
        parent.appendChild(this.input);
        // 添加input事件
        // 同样使用箭头函数
        this.input.addEventListener("input", e => this.inputHandler(e));
    }
    appendTo(parent) {
        if (typeof parent === "string") {
            parent = document.querySelector(parent);
        }
        parent.appendChild(this.elem);
    }

    inputHandler(e) {
        this.input.value = this.input.value.replace(/\D/g, "");
        // 节流
        if (this.ids) return;
        // 每500毫秒执行一次
        this.ids = setTimeout(() => {
            // 清除定时器
            clearTimeout(this.ids);
            this.ids = 0;
            // 将input.value值作为参数带入到setSep函数中
            // 计时结束后执行
            this.setStep(this.input.value);
        }, 500);
    }

    // 当点击的元素文本内容为-时，也就是input.value的值就-1
    clickHandler(e) {
        // 点击目标对象
        if (e.currentTarget.textContent === "-") {
            this.setStep(this.step - 1);
        } else {
            this.setStep(this.step + 1);
        }
    }

    // 设置输入框中数值范围
    setStep(value) {
        // value是局部变量， 给入一个数值进行转换
        value = Number(value);
        if (value < 1) value = 1;
        if (value > 999) value = 999;
        // 将vlaue的值赋给this.step这个全局变量
        this.step = value;
        // 将this.step这个全局变量赋给this.input.value
        this.input.value = this.step;
        var evt=new Event("step_change");
        evt.step=this.step;
        evt.elem=this.elem;
        document.dispatchEvent(evt);
    }
}

封装

js.

import Utils from "./Utils.js";
export default class StepNumber{
    elem;
    input;
    ids;
    step = 1;

    constructor() {

        this.elem = this.createElem();
    }

    createElem() {
        let div = Utils.ce("div", {
            width: "80px",
            height: "22px",
            position: "relative"
        });
        this.createBnList(div);
        this.cteateInput(div);
        return div;
    }
    createBnList(parent) {
        var leftBn = Utils.ce("div", {
            width: "15px",
            height: "20px",
            position: "absolute",
            textAlign: "center",
            userSelect: "none",
            border: "1px solid #CCCCCC"
        });
        var rightBn = leftBn.cloneNode(false);
        leftBn.style.left = "0px";
        rightBn.style.right = "0px";
        leftBn.textContent = "-";
        rightBn.textContent = "+";
        parent.appendChild(leftBn);
        parent.appendChild(rightBn);
        leftBn.addEventListener("click", e => this.clickHandler(e));
        rightBn.addEventListener("click", e => this.clickHandler(e));
    }
    cteateInput(parent) {
        this.input = Utils.ce("input", {
            width: "46px",
            height: "18px",
            position: "absolute",
            left: "17px",
            border: "none",
            textAlign: "center",
            borderTop: "1px solid #CCCCCC",
            borderBottom: "1px solid #CCCCCC"
        });
        this.input.value = "1";
        parent.appendChild(this.input);
        this.input.addEventListener("input", e => this.inputHandler(e));
    }
    appendTo(parent) {
        if (typeof parent === "string") {
            parent = document.querySelector(parent);
        }
        parent.appendChild(this.elem);
    }

    inputHandler(e) {
        this.input.value = this.input.value.replace(/\D/g, "");
        // 节流
        if (this.ids) return;
        this.ids = setTimeout(() => {
            clearTimeout(this.ids);
            this.ids = 0;
            this.setStep(this.input.value);
        }, 500);
    }

    clickHandler(e) {
        if (e.currentTarget.textContent === "-") {
            this.setStep(this.step - 1);
        } else {
            this.setStep(this.step + 1);
        }
    }

    setStep(value) {
        value = Number(value);
        if (value < 1) value = 1;
        if (value > 999) value = 999;
        this.step = value;
        this.input.value = this.step;
        var evt=new Event("step_change");
        evt.step=this.step;
        evt.elem=this.elem;
        document.dispatchEvent(evt);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="divs"><span>39.2</span>=<span>0</span></div>
    <div class="divs"><span>60.5</span>=<span>0</span></div>
    <div class="divs"><span>128</span>=<span>0</span></div>
    <div class="divs"><span>1200</span>=<span>0</span></div>
    <div class="divs"><span>3600</span>=<span>0</span></div>
    <div class="divs"><span>4.8</span>=<span>0</span></div>
    <script type="module">
    import StepNumber from "./js/StepNumber.js";
    
    // for(let i=0;i<10;i++){
    //     let step=new StepNumber();
    //     step.appendTo(document.body);
    // }

    // 收到这个事件后。执行stepChangeHandler函数
    document.addEventListener("step_change",stepChangeHandler);
    // 获取所有类名为divs的元素转换为数组赋给divs
    var divs=Array.from(document.getElementsByClassName("divs"));
    // 遍历divs这个数组
    divs.forEach(function(item){
        // 将创建元素的方法赋给step变量
        let step=new StepNumber();
        // 将每个元素都添加到每个父容器中
        step.appendTo(item);
    })
 
    function stepChangeHandler(e){
        // 当前容器的父容器
        var divs=e.elem.parentElement;
        // 第一个子元素的值赋给变量sumSpanpriceSpan
        var priceSpan=divs.children[0];
        // 第二个子元素的值赋给变量sumSpan
        // 总值
        var sumSpan=divs.children[1];
        sumSpan.textContent=(Number(priceSpan.textContent)*e.step).toFixed(2);
    }
</script>
</body>
</html>