Trình tạo màu ngẫu nhiên – JavaScript

Hướng dẫn này sẽ trình bày quy trình tạo màu ngẫu nhiên trong JavaScript.

Làm cách nào để tạo màu ngẫu nhiên trong JavaScript?

Để tạo màu ngẫu nhiên trong JavaScript, hãy sử dụng “ Math.random()*16 ” phương pháp tạo số ngẫu nhiên trong khoảng từ 0 đến 16. Điều này là do đây là một cách để tạo giá trị thập lục phân ngẫu nhiên, có thể được sử dụng để tạo màu ngẫu nhiên.

Ví dụ 1: Tạo màu ngẫu nhiên
Trong tệp HTML, chúng tôi sẽ tạo vùng chứa và thêm phần tử tạo màu ngẫu nhiên khi nhấp vào nút:

< id nhịp = 'màuContainer' >
< id nút = 'btn' > Nhấp để tạo màu ngẫu nhiên cái nút >
nhịp >

Bây giờ, hãy thêm mã dưới đây vào tệp JavaScript hoặc thẻ

---

• Đầu tiên, chúng ta đã định nghĩa một hàm “ colorGenerator() ” nơi chúng tôi tạo ra một “ chữ số hex ” mảng các số thập lục phân từ 0 đến 9 và A đến F.
• Tạo một biến “ mã màu ”.
• Sau đó, sử dụng “ vì ” vòng lặp, trên mỗi lần lặp, các phương thức của “ Toán học ” Đối tượng tạo ra một số ngẫu nhiên từ 0 đến 16.
• Chuyển số chỉ mục kết quả cho “hexDigits” và lưu trữ giá trị chỉ mục tương ứng trong biến “colorCode”.
• Quá trình sẽ lặp lại 6 lần để tạo mã gồm 6 chữ số.
• Cuối cùng, thêm mã này với “ # ” ký tên và quay lại chức năng.

Bây giờ, hãy đính kèm “ addEventListener() ” trên sự kiện nhấp chuột của nút. Gọi hàm đã xác định “ colorGenerator() ” để thay đổi màu nền của toàn bộ cơ thể:

btn. addEventListener ( 'nhấp chuột' , ( ) => {
tài liệu. thân hình . phong cách . màu nền = máy phát màu ( ) ;
} ) ;

đầu ra

Ví dụ 2: Tạo màu ngẫu nhiên bằng mã
Tại đây, chúng tôi sẽ in mã màu được tạo ngẫu nhiên tương ứng với màu bằng cách sử dụng “ bên trongHTML ' tài sản:

btn. addEventListener ( 'nhấp chuột' , ( ) => {
tài liệu. thân hình . phong cách . màu nền = máy phát màu ( ) ;
tài liệu. getElementById ( 'mã màu' ) . bên trongHTML = máy phát màu ( ) ;
} ) ;

Đầu ra hiển thị mã màu tương ứng với màu nền có liên quan của phần thân:

Đó là tất cả về trình tạo màu ngẫu nhiên trong JavaScript.

Phần kết luận

Để tạo màu ngẫu nhiên trong JavaScript, hãy tạo mã gồm 6 chữ số bằng cách sử dụng “ Toán học ” các phương thức đối tượng trong “ vì ' vòng. Trên mỗi lần lặp lại, một chữ số mã màu được tạo và tăng sau trong một biến. Mã màu này được trả về với “#” ở đầu. Hướng dẫn này trình bày quy trình tạo màu ngẫu nhiên trong JavaScript.