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

بخشهای ایجاد رنگ تصادفی با جاوااسکریپت

برای این کار نیاز به سه بخش داریم که بخش اول HTML، بخش دوم CSS و بخش سوم با جاوااسکریپت کنترل می شود.

بخش اول: کدهای HTML

برای شروع نیاز به یک سری کد HTML می باشد که برای ایجاد رنگ مورد نیاز می باشد. در واقع شامل دکمه برای ایجاد رنگ و کادری که رنگ ایجاد شده را نمایش خواهد داد.

برای این کار کد زیر را قرار می دهیم.

<h1>
  <button id="genNew">Generate New Random Color</button>
  <span id="color"></span>
</h1>

همان طور که مشاهده می کنید، کد شامل دکمه و span برای ایجاد و نمایش می باشد.

بخش دوم: کدهای CSS

کدهای CSS برای استایل تگ های HTML به کار رفته است و در فرآیند تولید رنگ نقشی ندارند.

h1 {
  background: white;
  padding: 1rem 2rem;
  text-align: center;
}
span {
  display: block;
  padding: 1rem;
  font-size: 1rem;
  font-weight: normal;
  font-family: monospace;
}

در کدهای CSS، ما استایل تگ های بخش HTML را مشخص می کنیم. شما می توانید هر استایل دلخواهی که می خواهید به آنها اضافه کنید.

بخش سوم: کدهای جاوااسکریپت

در واقع ایجاد رنگ تصادفی را کدهای جاوااسکریپت انجام می دهد و کدهای HTML و CSS برای نمایش می باشد. شما می توانید این کدها را تغییر دهید تا با پروژه شما هماهنگ شود.

const setBg = () => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroundColor = "#" + randomColor;
  color.innerHTML = "#" + randomColor;
}

genNew.addEventListener("click", setBg);
setBg();

کد جاوااسکریپت از یک تابع به نام setBg و یک لیسینر تشکیل شده است که با اجرای شدن کدها، تابع منتظر کلیک کاربر می باشد تا اجرا شود.

مثال

Generate New Random Color

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

دانلود کد

نکته: گاهی برای اجرای صحیح کد نیاز هست که چند بار مرورگر خود را رفرش کنید.

دیگر کدها