问题描述
我在youtube中发现了一个专门处理html和javscript的计数器时遇到了麻烦。 计数器工作得很好,但是当计数器完成时,我找不到在数字上添加一些thousen分隔符的方法。
我要寻找的是在计数器以双头分隔符结束时对数字进行硬编码。我想那是最简单的方法。
如果没有,请通过另一种方式告诉我。
有人可以帮助我吗?
addEventListener('DOMContentLoaded',() => {
const contadores = document.querySelectorAll('.contador-cantidad')
const veLocidad = 1000
const animarcontadores = () => {
for (const contador of contadores) {
const actualizar_contador = () => {
let cantidad_maxima = +contador.dataset.cantidadTotal,valor_actual = +contador.innerText,incremento = (cantidad_maxima / veLocidad)
if (valor_actual < cantidad_maxima) {
contador.innerText = Math.ceil(valor_actual + incremento)
setTimeout(actualizar_contador,5)
} else {
contador.innerText = cantidad_maxima
}
}
actualizar_contador()
}
}
const mostrarContadores = elementos => {
elementos.forEach(elemento => {
if (elemento.isIntersecting) {
elemento.target.classList.add('animar')
elemento.target.classList.remove('ocultar')
setTimeout(animarcontadores,1000)
}
});
}
const observer = new IntersectionObserver(mostrarContadores,{
threshold: 0.75
})
const elementosHTML = document.querySelectorAll('.contador')
elementosHTML.forEach(elementoHTML => {
observer.observe(elementoHTML)
})
})
/*Numbers*/
.col-numeros {
margin-top: 4%;
margin-bottom: 4%;
padding-left: 0%;
padding-right: 0%;
}
.col-numeros h2 {
display: inline-block;
color: #30a6ff;
margin-top: auto;
margin-bottom: auto;
}
@media (max-width: 800px) {
.col-titulo-50-negro h1 {
font-size: 40px;
text-align: center;
}
.col-parrafo-mayusculas-cian p {
font-size: 20px;
text-align: center;
}
.col-parrafo-mayusculas-cian-especial {
text-align: center;
}
.col-parrafo-mayusculas-cian-especial p {
font-size: 18px !important;
}
.punto-color-50 {
position: relative;
font-size: 40px;
color: #0fe0c4;
}
.punto-color-media-30 {
position: relative;
font-size: 30px;
color: #0fe0c4;
}
.punto-color-50-azul {
position: relative;
font-size: 30px !important;
color: #30a6ff;
}
.punto-color-20 {
position: relative;
font-size: 16px;
color: #0fe0c4;
}
.fila-titulo h2 {
text-align: center;
}
.logo-sapb1 img {
width: 300px;
height: auto;
}
.titulo-cta-boton {
font-size: 22px;
}
.col-parrafo-mayusculas-cian p {
font-size: 18px !important;
}
.col-parrafo-mayusculas-azul {
text-align: center;
}
.col-parrafo-mayusculas-azul p {
font-size: 18px !important;
}
.btn-link {
font-size: 16px;
}
}
@media (max-width:400px) {
.logo-sapb1 img {
width: 160px;
height: auto;
}
.col-titulo-50-negro h1 {
font-size: 20px !important;
font-weight: 800;
color: #1c2529;
}
.col-parrafo-mayusculas-cian-especial p {
font-size: 14px !important;
}
.col-p-18-izq p {
font-size: 14px !important;
}
.texto-cian-19 {
font-size: 15px !important;
}
.col-parrafo-mayusculas-cian p {
font-size: 14px !important;
}
.titulo-columnas-negro {
font-size: 18px;
}
.parrafo-columnas-negro {
font-size: 14px;
}
.punto-color-22 {
font-size: 18px;
}
.col-items-izq {
margin-bottom: 4%;
}
.col-parrafo-mayusculas-azul p {
font-size: 16px !important;
}
.punto-color-50-azul {
font-size: 20px !important;
}
.col-numeros img {
height: 50px;
width: auto;
margin: 0 0 0 0;
}
.col-numeros h2 {
display: inline-block;
color: #30a6ff;
margin-top: auto;
margin-bottom: auto;
font-size: 14px;
}
.col-media-numeros {
text-align: center !important;
}
.parrafos-modulos {
font-size: 14px !important;
}
.btn-link {
font-size: 14px;
}
.col-p-cian-sepcial {
padding-left: 2%;
padding-right: 2%;
}
}
.contador-cantidad {
display: inline-flex;
color: white;
}
.col-numeros img {
height: 65px;
width: auto;
text-align: center;
margin: 0 2% 0 0;
}
.col-numeros p {
color: #060808;
text-align: center;
margin: 4% 0;
font-size: 18px;
padding: 0 5%;
width: 100%;
}
.numero-especial {
font-size: 37px;
}
@keyframes aparecer {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.ocultar {
opacity: 0;
}
.animar {
animation: aparecer 1.3s;
}
<!DOCTYPE html>
<html>
<head>
<title>SAP Business One - Star Technology</title>
<script type="text/javascript" src="java-script/contador.js"></script>
</head>
<body>
<div class="container-fluid" style="background: #e8e8e86e;">
<div class="cuerpo-general">
<div class="row fila-titulo pt-4">
<h2>SAP Bsuiness One en números<span class="punto-color-50-azul">.</span></h2>
</div>
<div class="row pt-2 pb-4 col-parrafo-mayusculas-azul">
<p>CONECTÁ Y OPTIMIZÁ TUS PROCESOS</p>
</div>
<div class="row">
<div class="col-xl-4 col-md-4 col-sm-12 col-numeros contador ocultar">
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-5 p-0" style="text-align: right;">
<img src="Imagenes/icono-clientes-servicio.png">
</div>
<div class="col-7 p-0" style="text-align: center;">
<h2>+</h2>
<h2 class="contador-cantidad" data-cantidad-total="65000">0</h2>
</div>
</div>
<div class="row">
<div class="col-5 p-0"></div>
<div class="col-7 p-0" style="text-align: center;">
<p>Clientes</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-12 col-numeros contador ocultar">
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-5 p-0" style="text-align: right;">
<img src="Imagenes/icono-usuarios-servicio.png">
</div>
<div class="col-7 p-0" style="text-align: center;">
<h2>+</h2>
<h2 class="numero-especial contador-cantidad" data-cantidad-total="1000000">0</h2>
</div>
</div>
<div class="row">
<div class="col-5 p-0"></div>
<div class="col-7 p-0" style="text-align: center;">
<p>Usuarios diarios</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-12 col-numeros contador ocultar">
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-5 p-0" style="text-align: right;">
<img src="Imagenes/icono-clientesarg-servicio.png">
</div>
<div class="col-7 p-0" style="text-align: center;">
<h2>+</h2>
<h2 class="contador-cantidad" data-cantidad-total="+400">0</h2>
</div>
</div>
<div class="row">
<div class="col-5 p-0"></div>
<div class="col-7 p-0" style="text-align: center;">
<p>Clientes en Argentina</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-md-4 col-sm-12 col-numeros contador ocultar">
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-5 p-0" style="text-align: right;">
<img src="Imagenes/icono-paises-servicio.png">
</div>
<div class="col-7 p-0" style="text-align: center;">
<h2>+</h2>
<h2 class="contador-cantidad" data-cantidad-total="+170">0</h2>
</div>
</div>
<div class="row">
<div class="col-5 p-0"></div>
<div class="col-7 p-0" style="text-align: center;">
<p>Países</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-12 col-numeros contador ocultar">
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-5 p-0" style="text-align: right;">
<img src="Imagenes/icono-lenguajes-servicio.png">
</div>
<div class="col-7 p-0" style="text-align: center;">
<h2 class="contador-cantidad" data-cantidad-total="28">0</h2>
</div>
</div>
<div class="row">
<div class="col-5 p-0"></div>
<div class="col-7 p-0" style="text-align: center;">
<p>Lenguajes disponibles</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-12 col-numeros contador ocultar">
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-5 p-0" style="text-align: right;">
<img src="Imagenes/icono-localizaciones-servicio.png">
</div>
<div class="col-7 p-0" style="text-align: center;">
<h2 class="contador-cantidad" data-cantidad-total="44">0</h2>
</div>
</div>
<div class="row">
<div class="col-5 p-0"></div>
<div class="col-7 p-0" style="text-align: center;">
<p>Localizaciones</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)