تابع جاوا اسکریپتی افکت شمارنده اعداد

با سلام خدمت کاربران عزیز سایت اسکریپت دات کام

طبق درخواست های زیاد مبنی بر افکتی که بسیاری از سایت های خدمات دهی از جمله طراحی وب سایت از آن استفاده میکنند , بنا بر این گذاشتم که در این پست آموزش ساخت تابع جاوا اسکریپتی افکت شمارنده اعداد را برای آموزش قرار دهم .

طرز کار این تابع بدین صورت است که از عدد صفر تا عددی که مد نظر شما میباشد را به سرعت پیمایش و به محض رسیدن به عدد دلخواه شما ایست میکند .

ضمنا برای درک بیشتر میتوانید از دموی این تابع که در ادامه مطلب قرار دارد استفاده نمایید .

و اما آموزش :

برای این کار کافیست ابتدا تابع جاوا اسکریپتی زیر را در وب سایت خود کپی نموده

<script>
vmsDef = 0;
function vmsNumber(vmsInt,vmsId){
	document.getElementById(vmsId).innerHTML = vmsDef++;
	vmsSetTimeout = setTimeout(function(){vmsNumber(vmsInt,vmsId)},1);
	if(vmsDef>vmsInt){
		clearTimeout(vmsSetTimeout);	
	}	
}
window.onload = vmsNumber(1000,'vmsTest');
</script>

حال باید کد html زیر را برای نمایش در وب سایت خود وارد نمایید ( نوع تگ مهم نیست , برای مثال از h3 استفاده میکنم )

<h3 id="vmsTest"></h3>

نکته ۱ :‌ کد جاوا اسکریپت بالا زمانی که وب سایت به صورت کامل لود شود اجرا میشود . اگر میخواهید به محض خواندن توسط مرورگر و قبل از لود کامل اجرا شود , میتوانید در خط آخر ( = window.onload ) را حذف نمایید

به صورت زیر :

<script>
vmsDef = 0;
function vmsNumber(vmsInt,vmsId){
	document.getElementById(vmsId).innerHTML = vmsDef++;
	vmsSetTimeout = setTimeout(function(){vmsNumber(vmsInt,vmsId)},1);
	if(vmsDef>vmsInt){
		clearTimeout(vmsSetTimeout);	
	}	
}
vmsNumber(1000,'vmsTest');
</script>

نکته ۲ :‌ کاملا بدیهی است که در خط آخر 1000 به معنی عدد هدف و vmsTest به معنی آی دی تگ هدف می باشد که میتوانید این دو مقدار را تغییر دهید .

مثلا اگر میخواهید تا عدد 2500 را در آی دی vahid نمایش دهد , به این صورت تغییر دهید : (‘VmsNumber(2500,’vahid

نکته ۳ :‌ برای استفاده بیشتر به صورت هم زمان از این تابع , میتوانید خط آخر را به تعداد دلخواه کپی کرده و دو مقدار آن را تغییر نمایید .

به عنوان مثال :

vmsNumber(1000,'vmsTest');
vmsNumber(2500,'vahid');
vmsNumber(5000,'majidi');
vmsNumber(12300,'sadr');


<h3 id="vmsTest"></h3>
<i id="vahid"></i>
<p id="majidi"></p>
<h5 id="sadr"></h5>

دموی آماده اسکریپت

پخش اختصاصی

آموزش و کدنویسی : وحید مجیدی