เครื่องกำเนิดสีแบบสุ่ม – JavaScript

บทช่วยสอนนี้จะสาธิตขั้นตอนการสร้างสีแบบสุ่มใน JavaScript

จะสร้างสีสุ่มใน JavaScript ได้อย่างไร

สำหรับการสร้างสีแบบสุ่มใน JavaScript ให้ใช้ปุ่ม “ Math.random()*16 ” วิธีการสร้างตัวเลขสุ่มระหว่าง 0 ถึง 16 เนื่องจากเป็นวิธีหนึ่งในการสร้างค่าเลขฐานสิบหกแบบสุ่ม ซึ่งสามารถใช้สร้างสีแบบสุ่มได้

ตัวอย่างที่ 1: สร้างสีแบบสุ่ม
ในไฟล์ HTML เราจะสร้างคอนเทนเนอร์และเพิ่มองค์ประกอบ ที่สร้างสีแบบสุ่มเมื่อคลิกปุ่ม:

< รหัสช่วง = 'คอนเทนเนอร์สี' >
< รหัสปุ่ม = 'บีทีเอ็น' > คลิกเพื่อสร้างสีสุ่ม ปุ่ม >
ช่วง >

ตอนนี้เพิ่มรหัสที่ระบุด้านล่างในไฟล์ JavaScript หรือแท็ก

---

• ขั้นแรก เราได้กำหนดฟังก์ชัน “ เครื่องกำเนิดสี () ” ที่เราสร้าง “ เลขฐานสิบหก ” อาร์เรย์ของเลขฐานสิบหกตั้งแต่ 0 ถึง 9 และ A ถึง F
• สร้างตัวแปร “ รหัสสี '.
• จากนั้นใช้ปุ่ม “ สำหรับ ” วนซ้ำทุกครั้ง วิธีการของ “ คณิตศาสตร์ ” วัตถุสร้างตัวเลขสุ่มระหว่าง 0 ถึง 16
• ส่งหมายเลขดัชนีผลลัพธ์ไปยัง 'hexDigits' และเก็บค่าดัชนีที่เกี่ยวข้องในตัวแปร 'รหัสสี'
• กระบวนการจะทำซ้ำ 6 ครั้งสำหรับการสร้างรหัส 6 หลัก
• สุดท้ายเพิ่มรหัสนี้ด้วย ' # ” ลงชื่อและกลับสู่ฟังก์ชัน

ตอนนี้แนบ ' addEventListener() ” วิธีการในเหตุการณ์การคลิกปุ่ม เรียกใช้ฟังก์ชันที่กำหนด “ เครื่องกำเนิดสี () ” เพื่อเปลี่ยนสีพื้นหลังของร่างกายทั้งหมด:

พันล้าน addEventListener ( 'คลิก' , ( ) => {
เอกสาร. ร่างกาย . สไตล์ . สีพื้นหลัง = เครื่องกำเนิดสี ( ) ;
} ) ;

เอาต์พุต

ตัวอย่างที่ 2: สร้างสีแบบสุ่มด้วยรหัส
ที่นี่ เราจะพิมพ์รหัสสีที่สร้างขึ้นแบบสุ่มตามสีโดยใช้ปุ่ม ' HTML ภายใน ' คุณสมบัติ:

พันล้าน addEventListener ( 'คลิก' , ( ) => {
เอกสาร. ร่างกาย . สไตล์ . สีพื้นหลัง = เครื่องกำเนิดสี ( ) ;
เอกสาร. getElementById ( 'รหัสสี' ) . HTML ภายใน = เครื่องกำเนิดสี ( ) ;
} ) ;

ผลลัพธ์จะแสดงรหัสสีที่สอดคล้องกับสีพื้นหลังที่เกี่ยวข้องของเนื้อหา:

นั่นคือทั้งหมดที่เกี่ยวกับตัวสร้างสีแบบสุ่มใน JavaScript

บทสรุป

สำหรับการสร้างสีแบบสุ่มใน JavaScript ให้สร้างรหัส 6 หลักโดยใช้ “ คณิตศาสตร์ ” วิธีการวัตถุใน “ สำหรับ ” วนซ้ำ ในการวนซ้ำแต่ละครั้ง หลักรหัสสีจะถูกสร้างขึ้นและเพิ่มขึ้นภายหลังในตัวแปร รหัสสีนี้จะถูกส่งกลับด้วย “#” ในจุดเริ่มต้น บทช่วยสอนนี้แสดงขั้นตอนการสร้างสีแบบสุ่มใน JavaScript