۰اسنیپت آماده
شمارنده آمار متحرک
شمارنده
آمار
انیمیشن
۱۸
۴.۶ (۳)
<div class="radikalwp-countup"><div><b class="radikalwp-countup-n" data-target="1250">۰<//b><span>دانلود روزانه<//span><//div><div><b class="radikalwp-countup-n" data-target="292">۰<//b><span>اسنیپت کد<//span><//div><div><b class="radikalwp-countup-n" data-target="81">۰<//b><span>قالب المنتور<//span><//div><//div>
.radikalwp-countup {
display: flex;
width: 380px;
padding: 22px 12px;
background: linear-gradient(135deg, #0f172a, #1e1b4b);
border-radius: 16px;
}
.radikalwp-countup > div {
flex: 1;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .08);
}
.radikalwp-countup > div:last-child { border-left: none; }
.radikalwp-countup b {
display: block;
font-size: 26px;
font-weight: 800;
color: #a5b4fc;
font-variant-numeric: tabular-nums;
}
.radikalwp-countup span { font-size: 11px; color: #94a3b8; }
const counters = document.querySelectorAll('.radikalwp-countup-n');
counters.forEach(function (el) {
const target = parseInt(el.getAttribute('data-target') || '0', 10);
let current = 0;
const step = Math.max(1, Math.round(target / 40));
const timer = setInterval(function () {
current += step;
if (current >= target) {
current = target;
clearInterval(timer);
}
el.textContent = current.toLocaleString('fa-IR');
}, 30);
});
ردیف سه ستونه آمار که اعدادش با جاوااسکریپت سبک، از صفر تا مقدار هدف بهصورت فارسی شمرده میشوند. اعداد با جداکننده هزارگان فارسی نمایش داده میشوند و خوانایی بالایی دارند. برای بلوک اعتماد در صفحه اصلی، داشبورد و صفحه درباره ما مناسب است. مقادیر هدف با ویژگی data-target روی هر عنصر تعیین میشود.
عدد هدف روی ویژگی data-target هر عنصر نوشته شده است. کد جاوااسکریپت تا همان عدد میشمارد و نمایش را فارسی میکند.
بله؛ خروجی با toLocaleString فارسی و با جداکننده هزارگان نمایش داده میشود تا با متن فارسی بخواند.
یک div ستون جدید در HTML اضافه کنید و ویژگی data-target دلخواه بگذارید. چیدمان flex خودکار تقسیم میشود.
میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!