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

Sau đây là cú pháp để tạo màu ngẫu nhiên trong JavaScript -

$("#yourIdName").css("background-color", yourCustomFunctionNameToGetRandomColor());

Sau đây là mã JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="chooseColor" style="width:100px;height:100px;background-color:#FF0"></div>
<button onclick="pickRandomColor()">Click the button to get random color</button>
</body>
<script>
   //The getColorCode() will give the code every time.
   function getColorCode() {
      var makeColorCode = '0123456789ABCDEF';
      var code = '#';
      for (var count = 0; count < 6; count++) {
         code =code+ makeColorCode[Math.floor(Math.random() * 16)];
      }
      return code;
   }
   //Function call on button click.
   function pickRandomColor() {
      $("#chooseColor").css("background-color", getColorCode());
   }
</script>
</html>

Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong trình chỉnh sửa mã VS.

Theo mặc định, nó sẽ cho màu vàng và khi bạn nhấp vào nút, màu ngẫu nhiên sẽ hiển thị. Sau đây là kết quả -

Đầu ra

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

Sau đây là ảnh chụp nhanh của kết quả đầu ra mẫu sau khi nhấp vào nút Nhấp vào nút để lấy màu cơ bản -

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

Ở trên, chúng tôi đã tạo thành công màu ngẫu nhiên.