جهت ورود به تالار گفتمان سایت کلیک کنید


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

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

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

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

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

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

و اما آموزش :

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

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

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

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

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

  1. ایمان گفت:

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

  2. ali گفت:

    برای وردپرس چنین چیزی میخوام باید چه کنم

    • وحید مجیدی صدر گفت:

      با سلام

      لطفا در افزونه های وردپرس بگردید

      شاید باشد …

  3. حسینی گفت:

    سلام
    ممنون از شما

    آیا راهی هست که با هربار رفرش از اول شروع به شمارش نکنه

    • وحید مجیدی صدر گفت:

      باید با کوکی جاوا اسکریپت ادغام بشه دوست عزیز

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *