商品数量选择框
实现效果
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(){
this.elem=this.createElem();
}
createElem(){
let div=Utils.ce("div",{
width:"80px",
height:"22px",
position:"absolute"
});
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);
}
}
封装
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";
document.addEventListener("step_change",stepChangeHandler);
var divs=Array.from(document.getElementsByClassName("divs"));
divs.forEach(function(item){
let step=new StepNumber();
step.appendTo(item);
})
function stepChangeHandler(e){
var divs=e.elem.parentElement;
var priceSpan=divs.children[0];
var sumSpan=divs.children[1];
sumSpan.textContent=(Number(priceSpan.textContent)*e.step).toFixed(2);
}
</script>
</body>
</html>