کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک



visibility  
mode_comment   ۳۸

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

ما در ابتدا دو تابع جاوااسکریپت رو به شکل زیر تعریف می کنیم و سپس اونها رو در جاوا اسکریپت (قسمت 9) رویدادها - Events" href="https://www.7learn.com/tutorials/js-video-tutorial-part9-events">رویداد onclick تگ لینک دادن و دکمه ها استفاده می کنیم .

تابع setBgColor رنگ پس زمینه روبا توجه به ورودیش تعویض می کنه . ورودی این تابع نام و یا کد رنگ در html هست .

تابع randBg هم پس زمینه رو به صورت تصادفی از بین رنگ های درون آرایه ی colors انتخاب و تنظیم می کنه .

info نکته :

برای استفاده از این توابع بعد از اینکه کد بالا رو در صفحه وب و یا قالب وبلاگتون قرار دادید ، کافیه اون ها رو در رویداد onClick تگ های html مثل تگ لینک دادن و یا دکمه استفاده کنید .

بزارید چند مثال رو با هم ببینیم :

1. دکمه ای که با کلیک روی اون رنگ پس زمینه قرمز بشه :

2. لینکی که با کلیک روی اون رنگ پس زمینه آبی بشه :

3. دکمه ای که با کلیک روی اون رنگ پس زمینه به صورت رندم تعین بشه :

4. لینکی که با کلیک روی اون رنگ پس زمینه به صورت تصادفی تعین بشه :

info نکته :

به این نکته توجه داشته باشید که زمانی تغیر رنگ پس زمینه رو خواهید دید که برای پس زمینه تون عکس نگذاشته باشید .

می تونید پیش نمایش کد رو ببینید و کد صفحه وب شامل این چهار لینک/دکمه و نحوه استفادش رو دانلود کنید :

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
7Learn Experts
comment دیدگاه کاربران
پويا

قدیمی بود دوستان!
خوب از 7لرن انتظار کدهای حرفه ای تری میره.

لقمان آوند

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

پویا بهروش

😳

shn1377

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

لقمان آوند

باید از jQuery استفاده کنید .
نمونش رو اینجا می تونی ببینی .

shn1377

سلام.
ممنون.خیلی کمکم کردید.
این چیزی که گفتم بدون جی کوئری هم میشه نوشتش؟

لقمان آوند

میشه ولی خیلی سختتره و باید کد بیشتری بزنی .

سعید قدیمی

سلام لقمان جان خوبی استاد .. داداش میشه یه کد بذاری برامون که با رفتن روی عکس ها عکس ها تکون بخورن دقیقا عین سایت خودت

سجاد دریس

سلام.
این مطلب رو بخونید

مهدی

ممنون.

Mostafa

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

پس لطفا شما هم برای تغییر پس زمینه به صورت الگو و… آموزش بدین که چطوری این دکمه ها رو طراحی کنیم

لقمان آوند

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

دخملی

برای خودم متاسفم که هیچی ازش نفهمیدم 😥

میرزابیگی

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

وقتی وبلاگی رو به دامنه ای وصل میکنیم, بعد از مدتی گوگل رنک دامنه همون گوگل رنک وبلاگ میشه.
ولی الکسای دامنه ی جدید با الکسای وبلاگ متفاوته و جداگانه رتبه میگیرن.

راهی هست الکساهاشون با هم رتبه یکسان بگیرن ؟

ممنون میشم از پاسختون عزیز.
😳 😳 😳

لقمان آوند

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

mjavad5

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

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

اینجوری حلقه ناپایان بوجود میاد خب.
همش دور میزنه چون هر دو تا به هم وصلن !!!

لقمان آوند

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

mjavad5

سلام.
فوق العاده بود. 😳 😳 😳
بیزحمت لقمان جان,
میشه یه کدی ینویسید که همه صفحات داخلی و همه ایندکس ها هم ریدایرکت بشن ؟
مثلا :
http://mjm-eng.blogfa.com/page/salavat
تبدیل بشه به :
http://mirzabeigi.com/page/salavat

لطف بسیار بسیار زیادی میکنید اگه کدشو آماده کنید برامون 😳 😳 😳 😳 😳 😳

لقمان آوند

کد بالا تو url کنونی your.blog.com رو با domain.com جایگزین میکنه . این مثالی رو هم که زدی شامل میشه . فقط این کد رو باید تو اون صفحهات هم بزاری …

MAHDI

http://MAHDIARJMAND.RZB.IRیادتون نره
همه چیز داره

ستاره

دستتون درد نکنه خدا خیرتون بده

rahim12

سلام شما کدها رو توی یک باکس نوشته ودر وب قرار می دهید حالا لطفا کد یک باکس خالی را به من بدهید .به عبارت دیگر کد یک باکس چگونه نوشته می شود.ولو ساده باشد.

کیوان علی محمدی

سلام همون جا توی صفحه ی پیش نمایش می تونید کد باکس هارو بردارید دیگه،قسمت view source رو ببینید.

محمد

سلام داداش
من میخوام برای قالب جوملا از این کد استفاده کنم
البته به جای اینکه بعد از کلیک یه رنگ لود بشه میخوام یه فایل Css رو لود کنم !
اخه سایتی که الان دارم طراحی میکنم قراره چند رنگه باشه و نیازه که حتما استایل ها و عکس ها با کلیک کلا عوض بشه !
ممنون میشم راهنماییم کنی !
مرسی

کیوان علی محمدی

سلام باید حتما از کد های سمت سرور استفاده کنید . مثلا استایل مورد نظر رو توی کوکی یا سشن کاربر ذخیر کنید و بر طبق اون استایل های مورد نظر رو load کنید.

محمد

ممنون میشم اگه یه مقداری توضیح بدی ( بتونی یه نمونه آماده کنی ممنونت میشم ) خدایش الان بالای 1 ماهه از هزاران نفر پرسیدیم و صد هزار جا رو سر زدم هیچکس نتونست جوابمو بده !
همین که شما جواب دادی شرمنده کردی ولی ممنونت میشم کدشم به صورت دمو هم شده نشونم بدی
مرسی

کیوان علی محمدی

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

محمد

مشکلی با هزینش نیست فقط میخوام که کاربر روی یه مربع کوچیک کلیک کنه و یه فایل سی اس اس لود بشه براش !
به طور کلی یه سایت چند رنگه بتونم داشته باشم
ممنون میشم اوکیش کنی و شماره حصاب و هزینشو برام ایمیل کن
مرسی

کیوان علی محمدی

ایمیلتونو چک کنید.

عباس

سلام
این اسکریپتها روچطور می توان در وردپپرس استفاده کرد؟ باید برگه جدید ساخت؟

کیوان علی محمدی

نه دوست عزیز باید کد رو به قسمت head سایت اضافه کرد،و بعد کد قسمت html رو داخل پوسته خودتون قرار بدید

میلاد حسن پور

سلام دوست عزیز عیدت مبارک باشه ان شا الله چند سال به این سال ها؟؟بنده میلاد حسن پور 16 ساله از تبریز واقعا سایت مفیدی داری البته برای کسانی که از وردپرس استفاده می کنند !!! زیاد به دردشون می خوره خلاصه بریم سر اصل مطلب، من می خوام در وردپرس یه سایت داشته باشم ولی مشکلات زیادی دارم از قبیل انتخاب نام خوب مانند !!!!.IRیاد گرفتن برنامه نویسی PHPوHTML وJAVA SCRITEوcss وهاست رایگان خوب( البته برای مدتی کوتاه برای آشنایی بیشتر با وردپرس ) حالا در خواستم از تو این بود که بهم کمک کنی یه سایت از طریق وردپرس بازکنم و یه نام خوب بهم بگی و از چه منابعی (کتاب ،سایت،…{البته فارسی}) می تونم ای زبان های بالا رو یاد بگیرم ببین داداش گلم من خیلی دوست دارم در ضمینه اینترنت فعالیت کرده و خدمات رایگان به دنیا برسونم اگه در این راه کمکم کنی مخلصت میشیم ثواب داره یه آقایی کن هرچه میتونی کمکم کنی از من دریغ نکن یاعلی

سجاد دریس

سلام آقا میلاد.
اگه کلمه هاست رایگان رو توی گوگل جستجو کنی، سایت های زیادی پیدا میکنی که هاست رایگان در اختیار قرار میدن، میتونی توی اون سایت ها ثبت نام کنی و بعدش وردپرس رو نصب کنی.
اما اگه هدفت یادگیری وردپرسه بنظرم روی لوکال کار کنی بهتره، که برای این کار میتونی نرم افزار wamp یا xampp رو نصب کنی.
برای یادگیری زبان هایی که گفتی هم میتونی به سری های آموزشی سایت مراجعه کنی.

alireza security

سلام دوست عزیز ممنون از اموزش خوبتون.یه سوال اینکه چطور میشه با انتخاب یه استایل توسط کاربر به نمایش دربیاد.مثلا ماتوسایتمون توپنل تنظیمات گزینه انتخاب استایل داریم,نمونه این کارو اسکریپتهای انجمن ویبی هم انجام میده و بخش دوم سوالم اینکه چطور توبازدید مجدد سایت توسط همون بازدید کننده قالبی ک قبلا انتخاب کرده بوده برایش به نمایش دربیاد؟
باتشکر

لقمان آوند

باید یه کوکی ذخیره کنید و انتخاب کاربر رو توش بزارید و وقتی می خواید سایت باز بشه کوکی رو بخونید و استایل رو اعمال کنید .

alfasec

سلام مجدد و خسته نباشید, فرمودین از کوکی استفاده کنم,میخواستم ببینم اول اینکه چه اطلاعاتی داخل فایل کوکی گذاشت و چجوری؟ و اینکه بعدکه کوکیو ازسیستم کاربر دریافت کردیم با چه دستوراتی از یه فایل css بخصوص استفاده کنیم تا جایگزین استایل کنونی بشه؟اگه لطف کنید با یه مثال که تموم این کارارو انجام بده راهنماییم کنید خیلی ممنون میشم.

لقمان آوند

نام تم و یا استایل انتخابی رو تو کوکی ذخیره کن .
تو یه شرط if مقدار اون کوکی رو می خونی و چک می کنی اگه وجود داشت استایل اون تم رو اضافه می کنی درون بلاک if .

mahdi

سلام
اگر میشه اینو یه جوری درست کنید که مثل ویندوز هشت بعد از اتمام نصب رنگ ها در زمینه عوض میشه به نوبت و ارام ارام تغییر پیدا کند و نیازی با کلیک نباشه . مثلا 20 تا رنگ رو به ترتیب ارام ارام تو body این رنگ ها عوض بشه ,خودکار باشه.
خیلی مرسی از لطفتون.

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :