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

- visibility ۳۸ mode_comment

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

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

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

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

info نکته :

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

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

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

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

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

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

info نکته :

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

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

comment دیدگاه کاربران
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 این رنگ ها عوض بشه ,خودکار باشه.
خیلی مرسی از لطفتون.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2