کدَک پس زمینه ی چشمک زن

          حمیدرضا 
            بازدید : 2490
          پنجشنبه 07 خرداد 1394
           نظرات (0)
        

این کدَک مربوط است به ایجاد پس زمینه ای با چند رنگ که به صورت متوالی نمایش داده می شوند و حالت چشمک زن به پس زمینه ی وبلاگ یا سایت شما می دهند. شاید به نظر بعضی ها این کدَک کاملا بی استفاده باشد ؛ اما پیشنهاد می کنم تا انتهای مطلب را دنبال کنید تا فایده ی آن را متوجه شوید.

بعضی توضیحات در این مطلب ، مربوط به کاربران سطح متوسط است. ولی در کل افراد مبتدی هم می توانند از این کدَک استفاده کنند.

نکته: این کد ها را می توانید در بخش کد های کاربردی ، کد های اختصاصی ، اسکریپت های اضافی و ... در پنل کاربری وبلاگ خود وارد کنید. همچنین می توانید این کد ها را در بین <head> و </head> قالب خود قرار دهید. هر راهی بری شما ساده تر است را استفاده کنید.

چشمک زدن پس زمینه ی اصلی صفحه به رنگ های مشخص شده:

<<<code>>>

<style>

body{

background: #333333;

}

</style>

<script>

var CODENUM=0;

setInterval( function(){

var a = new Array( '#555555' , '#000000' , 'دیگر کدهای رنگ' );

if( CODENUM >= a.length )

{

CODENUM = 0;

}

else

{

document.getElementsByTagName('body')[0].style.background = a[CODENUM];

CODENUM++;

}

} , 2000 );

</script>

<<</code>>>

قسمت قرمز رنگ ، مدت زمانی است که بین تغییر کردن رنگ (چشمک زدن) طول می کشد. این مقدار بر حسب میلی ثانیه است. پس 2000 یعنی 2ثانیه. آن را به هر مقداری که دوست دارید تغییر دهید.

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

قسمت سبز رنگ ، مربوط به رنگ هایی است که شما می خواهید پس زمینه به آن ها تغییر کند. هر تعدادی می تواند باشد. فقط کافی است با حفظ همین الگو ، یعنی نوشتن کد رنگ در بین ' و جدا کردن کد های رنگ با , هر چه می خواهید کد رنگ اضافه کنید.

باز کردن کد ساز

چشمک زدن پس زمینه ی دیگر المنت های صفحه:

در توضیحاتی که بالا بود ، با کدَکی آشنا شدید که می توانستید با استفاده از آن رنگ پس زمینه ی کل صفحه را چشمک زن کنید. اما حالا می خواهید این کار را بر روی دیگر المنت های صفحه انجام دهیم. مثلا این نوع چشمک زدن می تواند برای جذب کردن افراد به قسمت تبلیغات مناسب باشد ؛ یا شاید هم یک پیغام مهم از طرف مدیر و ...

احتمالا الان بهتر متوجه کاربرد این کدَک می شوید.

<<<code>>>

<style>

#ad{ /* انتخاب المنت دلخواه شما با آی دی آن */

background: #333333;

}

</style>

<script>

var CODENUM=0;

setInterval( function(){

var a = new Array( '#555555' , '#000000' , 'دیگر کدهای رنگ' );

if( CODENUM >= a.length )

{

CODENUM = 0;

}

else

{

document.getElementById('ad').style.background = a[CODENUM];

CODENUM++;

}

} , 2000 );

</script>

<<</code>>>

خروجی کد از اینجا ببینید

نکات نمایش خروجی: برای این که این کد کار کند ابتدا یک تگ دلخواه با آی دی ad ایجاد کنید. اگر خواستید می توانید آی را در کد های بالا تغییر دهید و از آی دی مورد نظر خود استفاده کنید. بعد از این کار ، کد بالا را بعد از تگی که ایجاد کرده اید کپی کنید و نتیجه را ببینید.

اگر با سی اس اس (Css) آشنایی داشته باشید متوجه می شوید که من در قسمت قرمز رنگ یک المنت را که آی دی آن ad است را انتخاب کرده ام و رنگ اولیه ی پس زمینه ی آن را #333333 گذاشته ام.

در قسمت آبی رنگ هم دوباره همان کار را تکرار کرده ام و آی دی ad را در جاوا اسکریپت برای تغییر دادن رنگ پس زمینه از صفحه دریافت کرده ام.

بقیه ی کار ها هم مشابه قسمت قبلی است.

توضیح کلی درباره ی چگونگی کار کردن کد جاوا اسکریپت:

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

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

پس از آن بررسی می شود که آیا CODENUM (متغییر عمومی ای که قبل از شروع تابع تعریف کرده ایم) مقدارش برابر یا بزرگ تر از تعداد کد های رنگ هست یا نه. اگر بود ، یعنی ما به پایان کد های رنگ رسیده ایم و دیگر کد رنگی باقی نمانده ، پس CODENUM را دوباره صفر می کنیم که یعنی از اول.

اما اگر این شرط برقرار نبود ، هنوز امکان استفاده از کد رنگ جدید وجود دارد. پس تابع ، کد رنگ را در مقدار پس زمینه ی استایل المنت مورد نظر ما قرار می دهد تا رنگ پس زمینه اش تغییر کند. پس از این کار ، مقدار CODENUM را یکی زیاد می کند که در دور بعدی کد رنگ بعدی آرایه ی رنگ ها نمایش داده شود.

خروجی ساز - آزمایش کد های شما

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788