如何从计数器中删除这些逗号,你只需要做空格
class countUp {
constructor(el) {
this.el = el;
this.setVars();
this.init();
}
setVars() {
this.number = this.el.querySelectorAll("[data-countup-number]");
this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const end = parseFloat(
entry.target.dataset.countupNumber.replace(/,/g, "")
);
const decimals = this.countDecimals(end);
if (entry.isIntersecting) {
this.iterateValue(entry.target, end, decimals);
}
});
}, this.observerOptions);
}
init() {
if (this.number.length > 0) {
this.number.forEach((el) => {
this.observer.observe(el);
});
}
}
iterateValue(el, end, decimals) {
const start = 0;
const duration = 2500;
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsedPercent = (timestamp - startTimestamp) / duration;
const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
let interimNumber = Math.abs(easedProgress * (end - start) + start);
el.innerHTML = this.formatNumber(interimNumber, decimals);
if (easedProgress < 1) {
window.requestAnimationFrame(step);
}
};
// requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
window.requestAnimationFrame(step);
}
easeOutQuad(x) {
return 1 - Math.pow(1 - x, 3);
}
easeOutQuint(x) {
return 1 - Math.pow(1 - x, 5);
}
countDecimals(val) {
if (Math.floor(val) === val) return 0;
return val.toString().split(".")[1].length || 0;
}
formatNumber(val, decimals) {
return val.toLocaleString("en-US", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
});
}
}
// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];
dataModules.forEach((element) => {
element.dataset.module.split(" ").forEach(function () {
new countUp(element);
});
});
<div data-module="countup">
<div class="concept__wrapper_quantity-inner">
<p data-countup-number="120000">120 000</p>
</div>
<div class="concept__wrapper_quantity-inner">
<p data-countup-number="45000">45 000</p>
</div>
</div
[![在此处输入图像描述][1]][1]如何不使用逗号而是使用空格分隔数字?
class countUp {
constructor(el) {
this.el = el;
this.setVars();
this.init();
}
setVars() {
this.number = this.el.querySelectorAll("[data-countup-number]");
this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const end = parseFloat(
entry.target.dataset.countupNumber.replace(/,/g, "")
);
const decimals = this.countDecimals(end);
if (entry.isIntersecting) {
this.iterateValue(entry.target, end, decimals);
}
});
}, this.observerOptions);
}
init() {
if (this.number.length > 0) {
this.number.forEach((el) => {
this.observer.observe(el);
});
}
}
iterateValue(el, end, decimals) {
const start = 0;
const duration = 2500;
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsedPercent = (timestamp - startTimestamp) / duration;
const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
let interimNumber = Math.abs(easedProgress * (end - start) + start);
el.innerHTML = this.formatNumber(interimNumber, decimals);
if (easedProgress < 1) {
window.requestAnimationFrame(step);
}
};
// requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
window.requestAnimationFrame(step);
}
easeOutQuad(x) {
return 1 - Math.pow(1 - x, 3);
}
easeOutQuint(x) {
return 1 - Math.pow(1 - x, 5);
}
countDecimals(val) {
if (Math.floor(val) === val) return 0;
return val.toString().split(".")[1].length || 0;
}
formatNumber(val, decimals) {
return val.toLocaleString("en-US", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
});
}
}
// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];
dataModules.forEach((element) => {
element.dataset.module.split(" ").forEach(function () {
new countUp(element);
});
});