تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

جمعه 29 آذر 1392

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

نویسنده: امیر حسینی   

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

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

1<script type="text/javascript">
2 function setBgColor(color){
3 document.body.style.backgroundColor = color;
4 }
5 function randBg() {
6 var bgColor, colors = new Array('red', 'green', 'blue', 'yellow', 'orange');
7 bgColor=colors[(Math.floor(Math.random() * colors.length))];
8 setBgColor(bgColor);
9 }
10</script>

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


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

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

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

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

1<button onClick="setBgColor('red')">Red</button>

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

1<a href="#" onClick="setBgColor('blue')">Blue</a>

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

1<button onClick="randBg()">Random</button>

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

1<a href="#" onClick="randBg()">Random</a>
نکته : به این نکته توجه داشته باشید که زمانی تغیر رنگ پس زمینه رو خواهید دید که برای پس زمینه تون عکس نگذاشته باشید .

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

دانلود رایگان کد

نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How do you get a growth spurt?
یکشنبه 26 شهریور 1396 09:46 ب.ظ
Amazing issues here. I am very glad to see your article.
Thank you so much and I'm having a look ahead to contact you.

Will you kindly drop me a mail?
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How do you grow?
شنبه 14 مرداد 1396 04:01 ق.ظ
Pretty! This has been an incredibly wonderful post.
Many thanks for providing this information.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
zinabilleter.weebly.com
جمعه 6 مرداد 1396 05:34 ب.ظ
It's difficult to find experienced people for this subject, however, you
seem like you know what you're talking about!
Thanks
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
manicure
یکشنبه 20 فروردین 1396 10:38 ب.ظ
Hi this is kind of of off topic but I was wanting to know
if blogs use WYSIWYG editors or if you have to manually code with HTML.

I'm starting a blog soon but have no coding experience so I
wanted to get advice from someone with experience.
Any help would be enormously appreciated!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
manicure
سه شنبه 15 فروردین 1396 12:27 ب.ظ
I believe that is among the such a lot vital info for me.
And i am glad studying your article. But should statement on few normal
things, The site style is wonderful, the articles is in point of
fact great : D. Excellent job, cheers
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com