جستجو برای:
سبد خرید 0
  • مداد سبز
  • دوره های آموزشی
    • آموزش برنامه نویسی
    • آموزش پایتون
    • آموزش PHP
    • آموزش متلب
    • آموزش SQl
    • آموزش سالیدیتی
    • آموزش Asp.net core
    • آموزش ++C
    • آموزش vue js
  • وبلاگ
    • مقالات آموزش برنامه نویسی
    • مقالات پایتون
    • مقالات PHP
    • مقالات آموزش جاوا اسکریپت
    • مقالات آموزش فلاتر
    • مقالات کسب درآمد
  • کسب درآمد با مداد سبز
  • درباره مداد سبز
  • تماس با مداد سبز
  • 09920882904
  • info@medadsabz.com
0
مداد سبز
  • مداد سبز
  • دوره های آموزشی
    • آموزش برنامه نویسی
    • آموزش پایتون
    • آموزش PHP
    • آموزش متلب
    • آموزش SQl
    • آموزش سالیدیتی
    • آموزش Asp.net core
    • آموزش ++C
    • آموزش vue js
  • وبلاگ
    • مقالات آموزش برنامه نویسی
    • مقالات پایتون
    • مقالات PHP
    • مقالات آموزش جاوا اسکریپت
    • مقالات آموزش فلاتر
    • مقالات کسب درآمد
  • کسب درآمد با مداد سبز
  • درباره مداد سبز
  • تماس با مداد سبز
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
ورود / عضویت

آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت

2022-11-22
ارسال شده توسط support
برنامه نویسی، HTML، جاوا اسکریپت
آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت

رنگ پس زمینه سایت شما جزو اولین چیزهایی است که برای کاربر لود می شود پس باید رنگی انتخاب شود که متناسب با هدف سایت شما  باشد. حال در این قسمت راحت‌ترین آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت را در اختیار شما قرار میدهیم.

آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت

آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت

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

استفاده از تگ مرسوم در html

تغییر بک گراند در html  جزو اولین مواردی است که در درس طراحی سایت آموزش داده می شود. شما خیلی راحت از طریق تگ ساده  bgcolor  در اچ‌تی‌ام‌ال می توانید پس زمینه را به رنگ دلخواه در آورید. به مثال زیر دقت کنید:

<body bgcolor=”#009966″ >

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

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

روش قبلی یکی از روش های منسوخ که در ورژن های قدیمی معمولا استفاده می شد و در حال حاضر برای هرگونه تغییرات از جمله تغییر رنگ پس زمینه یا به اصطلاح استایل دهی به سند اچ‌تی‌ام‌ال باید از روش های بهتر  که همان کدهای css هستند استفاده نمایید.

Style یک ویژگی عمومی در html  است که از طریق آن می توانید از کدهای css  استفاده نمایید. فقط کافی است که آن را در تگ body  در html وارد کنید دقیقا به صورت زیر:

مطالعه مقاله
آموزش طراحی فرم ثبت نام با HTML و CSS | آموزش 100% ویدیویی

<body style=”background-color: #ffbb22;”>

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

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

اگر قصد این کار را دارید باید بگویم در قدم اول نیاز دارید که یک راه ارتباطی با سند html  بسازید. البته کار سختی ندارید این کار را می توانید با تگ هایی که برای این منظور هستند استفاده کنید. در این قسمت ما استفاده از تگ button و a را آموزش می‌دهیم.

  1. روش اول اگر تصمیم دارید با یک کلیک بر روی دکمه رنگ پس زمینه عوض شود ابتدا باید دکمه را بسازید، سپس کدهای تغییر رنگ را در جاوا اسکریپت بزنید و در انتها این دو بخش را اتصال دهید. در ادامه کامل با جزئیات توضیح خواهیم داد:

گام اول: برای ساخت دکمه تنها کافی است از تگ button در سند استفاده کنید، مانند کد زیر:

<button>change background color</button>

حال شما یک دکمه دارید بعد از این قرار است با زدن دکمه رنگ پس زمینه عوض شود. حال باید از ویژگی onclick استفاده نمایید تا با زدن کلیک یک عمل موردنظر که اتصال است انجام شود. پس نیاز است کد زیر را وارد نمایید:

<button  onclick=”   ” >change background color</button>

گام دوم: اولین کاری که در این گام باید انجام دهیم باید شی بسازیم(این اقدام برای دسترسی به تگ ها درون اچ‌تی‌ام‌ال است). ما از تگ body در html استفاده کردیم پس نیاز است از آن یک شی بسازیم. بعد از استفاده از تگ body   از style  استفاده کردیم تا رنگ را تغییر دهیم. حال نوبت آن است که مشخص کنیم منظورمان رنگ پس زمینه است و رنگ مورد علاقه مان را اضافه میکنیم. دقیقا تک تک این مراحلی که گفتیم را باید به صورت زیر وارد نمایید:

مطالعه مقاله
دستور if در متلب | آموزش به زبان ساده + ویدیو | مداد سبز

document.body.style.background=”#35f1f8″;

 

گام سوم: حال نوبت پیاده‌سازی اتصال دو بخش قبلی به یکدیگر است که دو روش وجود دارد:

روش اول: در روش اول به صورت مستقیم باید کد قبلی را در ویژگی onclick  اضافه کنید. با اجرای کد زیر یک متن با عنوان change background color نمایش داده می شود که زدن به رنگی که کد آن را وارد کرده اید در می آید.

<button onclick=”document.body.style.background= ‘#35f1f8’ ;”>change background color</button>

روش دوم: در این روش ابتدا وارد بخش کدهای جاوا اسکریپت می شوید یک تابع تعریف می کنید (قرار است این کد را در html  فراخوانی کنید) :

function setBgColor (color) {

    document.body.style.background=color;

}

بعد از آن در بخش html  کد زیر را وارد کنید:

<button onclick=” setBgColor (‘#35f1f8’);”>change background color</button>

  1. تغییر رنگ پس زمینه با تگ a

 شما تمامی موارد بالا را می توانید با تگ a نیز پیاده‌سازی کنید، دقیقا مشابه کد زیر:

<a href=”#” onclick=” setBgColor (‘#35f1f8’);”>change background color</a>

تغییر رنگ پس زمینه با رنگ‌های تصادفی

تغییر رنگ پس زمینه با رنگ‌های تصادفی

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

function setBgColor(color){

    document.body.style.backgroundColor = color;

}

function randBg() {

    var bgColor, colors = new Array(‘red’, ‘green’, ‘blue’, ‘yellow’, ‘orange’);

    bgColor=colors[(Math.floor(Math.random() * colors.length))];

    setBgColor(bgColor);

}

 حال باید تابع را با استفاده از تکه کد زیر فراخوانی کنید:

<button onclick=” randBg ();”>change background color</button>

تغییر رنگ پس زمینه در حالت های مختلف

تغییر رنگ پس زمینه در حالت های مختلف

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

مطالعه مقاله
CSS چیست؟

تغییر پس زمینه با هر رفرش

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

تغییر پس زمینه به صورت گرادینت

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

تغییر پس زمینه بعد از پرداخت

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

خلاصه

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

قبلی 10 مورد از مزایای برنامه نویسی وب با پایتون را بدانید
بعدی بهترین ide برای پایتون

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • #C
  • ++C
  • CSS
  • HTML
  • PHP
  • SQL server
  • اندروید
  • برنامه نویسی
  • پایتون
  • جاوا
  • جاوا اسکریپت
  • دارت
  • دلفی
  • سوئیفت
  • فلاتر
  • متلب
  • وبلاگ
  • یادگیری ماشین
  • محبوب
  • جدید
  • دیدگاه ها

لوگو مدادسبز    مداد سبز

آکادمی مداد سبز از سال 1400 با همکاری اساتید با سابقه و کارشناسان مجرب آموزشی-مشاوره ای با هدف ارتقای کیفیت آموزش آنلاین در کشور جهت تربیت نیرو های متخصص، در حال فعالیت می باشد و در این راستا قصد دارد آموزش های آنلاین با کیفیت و مهارت محور را در زمینه های مختلف در اختیار دانشجویان قرار دهد.

دسترسی سریع
  • مداد سبز
  • درباره مداد سبز
  • تماس با مداد سبز
  • کسب درآمد
  • حریم خصوصی
  • شرایط بازگشت وجه

شبکه های اجتماعی

مجوز های مداد سبز

اینماد
logo-samandehi
تمامی حقوق سایت متعلق به پلتفرم آموزش آنلاین مداد سبز می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://medadsabz.com/?p=20427
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده به را تایپ کنید
ثبت
ورود با گذرواژه یکبار مصرف
ارسال مجدد گذرواژه یکبار مصرف(00:180)
آیا حساب کاربری ندارید؟
ثبت نام

ارسال مجدد گذرواژه یکبار مصرف (00:180)
بازگشت به ورود
  • (+93) Afghanistan
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) Iran
  • (+964) Iraq
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) Pakistan
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) Turkey
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) United Arab Emirates
  • (+44) United Kingdom
  • (+1) United States
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe
مرورگر شما از HTML5 پشتیبانی نمی کند.