原生-购物车计数器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div div
        {
            width: 20px;
            text-align: center;
            line-height: 20px;
            height: 20px;
            background-color: white;
            border: 1px solid #000000;
            cursor: pointer;
            float: left;
        }
        input{
            width: 40px;
            height: 18px;
            border: 1px solid #000000;
            border-left: none;
            border-right:none ;
            background-color: white;
            float: left;
            text-align: center;
            outline: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="subtractBn">-</div>
        <input type="text" value="1">
        <div class="addBn">+</div>
    </div>
<script>
    var subtractBn=document.querySelector(".subtractBn");
    var addBn=document.querySelector(".addBn");
    var input=document.querySelector("input");
    var sum=1;
    subtractBn.addEventListener("click",clickHandler);
    subtractBn.addEventListener("mousedown",clickHandler);
    addBn.addEventListener("click",clickHandler);
    addBn.addEventListener("mousedown",clickHandler);
    input.addEventListener("input",inputHandler);
    function clickHandler(e) {
        if(e.type==="mousedown"){
            e.preventDefault();
            return;
        }
        if(this.textContent==="+"){
            sum++;
            if(sum>99) sum=99;
        }else{
            sum--;
            if(sum<1) sum=1;
        }
        input.value=sum.toString();
    }

    function inputHandler(e) {
        input.value=input.value.replace(/[^0-9]/g,"");
        if(Number(input.value)>99){
            sum=99;
            input.value=sum;
            return;
        }
        if(Number(input.value)<1){
            sum=1;
            input.value=sum;
            return;
        }
        sum=Number(input.value);
    }

</script>
</body>
</html>

 

posted @ 2020-02-28 01:12  吴小明-  阅读(241)  评论(0)    收藏  举报