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

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

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

و اما آموزش :

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

<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>

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

پخش اختصاصی

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