<!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>