库存变更器的实现

最新推荐文章于 2024-02-22 17:10:23 发布

会写BUG的老中医

最新推荐文章于 2024-02-22 17:10:23 发布

阅读量69

点赞数

文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/m0_59310979/article/details/122847131

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            min-width: 50px;
            display: inline-block;
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
    <p>
        库存的最小值为0
    </p>
    <div>
        库存：
        <button data-plus="-1000">-1000</button>
        <button data-plus="-100">-100</button>
        <button data-plus="-10">-10</button>
        <button data-plus="-1">-</button>
        <span id="spanNumber">10</span>
        <button data-plus="1">+</button>
        <button data-plus="10">+10</button>
        <button data-plus="100">+100</button>
        <button data-plus="1000">+1000</button>
    </div>

    <script>
        var btns = document.querySelectorAll("button");
        var span = document.getElementById("spanNumber");
        for (var i = 0; i < btns.length; i++) {
            var b = btns[i];
            b.onclick = function() {
                var num = parseInt(span.innerText);
                //加某个数
                var plus = parseInt(this.dataset.plus);
                var result = num + plus;
                if (result < 0) {
                    result = 0;
                }
                span.innerHTML = result;
            }
        }
    </script>
</body>

</html>

会写BUG的老中医

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
库存变更器的实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...
复制链接

扫一扫