ایجاد رنگ تصادفی با کدنویسی javascript
ایجاد میلیونها رنگ تصادفی با کدنویسی javascripts
در این آموزش، خواهید آموخت که چگونه با استفاده از کدهای html ، css و javascript رنگ پس زمینه یک عنصر را هر یک ثانیه و با رنگ متفاوت و تصادفی تغییر دهیم.
با استفاده از مدل رنگی RGB و کدهای html ، css و javascript و با کمک متد setinterval و سایر توابعی مانند random و floor ، برنامه ای می نویسیم که قادر است رنگ پس زمینه یک عنصر مانند عنصر div را با ترکیب متنوع سه رنگ اصلی و با طیف گسترده ای از رنگها به صورت تصادفی به همراه کد رنگی مربوطه به طوریکه هر یک ثانیه یک رنگ متفاوت و تا بینهایت را در عنصر div اعمال و نمایش دهد.
قبل از هر چیز ابتدا لازمست در مورد مدل رنگی RGB بصورت مختصر توضیح دهم .
مدل رنگی RGB
اصطلاح RBG مخفف کلمات (R) Red بمعنی قرمز، (G) Green بمعنی سبزو (B) Blue بمعنی آبی است. بنابراین کد RGB حالتی است که سه بخش اصلی دارد و هر یک از این بخشها مقادیری بین ۰ تا ۲۵۵ میتوانند دریافت کنند که می تواند با ترکیب مختلف این اعداد طیف رنگی گسترده ای را بوجود آورد. اگرهرسه رنگ اصلی به این صورت با هم ترکیب شوند (255,255,255 ) بالاترین حد روشنایی یعنی رنگ سفید تولید می شود و اگر شدت ترکیب آنها به پایین ترین حد یعنی به صورت (0,0,0) برسد یعنی صفر برسد رنگ سیاه ایجاد می شود.
math.random
()Math.random یک متد است که در زبان‌های برنامه‌نویسی مانند جاوااسکریپت، یک عدد اعشاری تصادفی بین صفر و یک تولید می‌کند.
math.floor
math.floor متدی است که به گرد کردن یک عدد به سمت پایین و رسیدن به نزدیکترین عدد صحیح اشاره دارد. این یک عملیات ریاضی است که یک عدد حقیقی را به عنوان ورودی می‌گیرد و بزرگترین عدد صحیح کوچکتر یا مساوی آن عدد را به عنوان خروجی ارائه می‌دهد.
()setinterval
()setinterval ، متدی است که به طور مکرر یک تابع را فراخوانی می‌کند تا یک قطعه کد را با یک تاخیر زمانی ثابت بین هر فراخوانی اجرا نماید.
:HTML
<“div id=”container>
<h1/> ایجاد میلیونها رنگ و کد رنگ تصادفی با کدنویسی<h1>
<div id=”colorCode”>rgb(0, 0, 0)</div>
<div id=”counter”>Seconds passed: 0</div>
<“”=img src=”pic/flower/main-logo-100-png.png” alt>
<h3>www.avana-group.ir</h3>
<div/>
:CSS
<style>
} body
; font-family: Arial, sans-serif
; background-color: #222
; color: #fff
: display: flex
; justify-content: center
; align-items: center
; height: 100vh
{
container#
; width: 700px
; height: 700px
;border-radius: 12px
transition: background-color 0.5s ease
; display: flex
;flex-direction: column
; justify-content: center
; align-items: center
box-shadow: 0 0 20px rgba(0,0,0,0.5)
{
#colorCode, #counter
; font-size: 30px
; margin: 20px 0
;background: rgba(0, 0, 0, 0.3);
; padding: 30px 24px
; border-radius: 6px
{
h1,h3
; color: black
{
</style>
:javascript
let seconds = 0
()} function getRandomColor
const r = Math.floor(Math.random() * 256)
;const g = Math.floor(Math.random() * 256)
;const b = Math.floor(Math.random() * 256)
;return { r, g, b, rgb: `rgb(${r}, ${g}, ${b})` }
{
}() function updateContainerColor
;() const color = getRandomColor
; const container = document.getElementById(‘container’)
; container.style.backgroundColor = color.rgb
; document.getElementById(‘colorCode’).textContent = color.rgb
;` document.getElementById(‘counter’).textContent = `Seconds passed: ${++seconds}
{
; setInterval(updateContainerColor, 1000)
