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

Trong hướng dẫn JavaScript này, mục đích của chúng ta là tìm hiểu về trình tạo màu ngẫu nhiên JavaScript. Nó cũng nêu bật các cách khác nhau để tạo mã

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
8 bằng các kỹ thuật khác nhau bao gồm các hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
9 và
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
0

Sử dụng Hàm //Syntax with one parameter slice(beginIndex); //Syntax with two parameters slice(beginIndex, endIndex); 9 và //slice function example, if beginIndex is a negative number var my_string = "test".str.slice(-2); //it will return "st". 0 để tạo màu ngẫu nhiên JavaScript

Phương pháp này sẽ giới thiệu cách tạo chuỗi hex ngẫu nhiên trong JavaScript và đặt màu nền bằng chuỗi hex đó. Hãy tìm hiểu các hàm

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
3,
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
4 và
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
5 được sử dụng để tạo mã màu hex ngẫu nhiên

Hàm JavaScript //slice function example, if beginIndex is a negative number var my_string = "test".str.slice(-2); //it will return "st". 6

Hàm này trả về một số ngẫu nhiên (của kiểu dữ liệu float) trong khoảng từ 0 (bao gồm) đến 1 (không bao gồm). Phạm vi này có thể được viết là [0,1) hoặc 0<=number<1

Hàm JavaScript //slice function example, if beginIndex is a negative number var my_string = "test".str.slice(-2); //it will return "st". 4

Phương thức

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
4 lấy
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
9 (tham số cơ số là tùy chọn) trong đó số được chuyển đổi thành một chuỗi. Chúng tôi đang sử dụng cơ sở 16 vì chúng tôi muốn số thập lục phân

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
2

Hàm JavaScript //slice function example, if beginIndex is a negative number var my_string = "test".str.slice(-2); //it will return "st". 5

Phương thức

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
5 lấy một phần cụ thể của chuỗi và trả về nó dưới dạng một chuỗi mới. Hãy nhớ rằng, chuỗi gốc không được sửa đổi. Chúng ta có thể sử dụng hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
5 với một hoặc hai tham số tùy theo yêu cầu của dự án

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);

Ở đây,

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
73 là bắt buộc trong khi
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
74 là tham số tùy chọn. Hàm này lấy một phần nhất định của chuỗi từ cuối nếu
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
73 là số âm

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".

Bây giờ, chúng ta đã có đủ hiểu biết về các hàm và phương thức cần thiết. Chúng ta hãy xem mã ví dụ được đưa ra dưới đây

Mã HTML

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
7

Mã CSS

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
2

Mã JavaScript

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
3

Trong mã ví dụ này, hàm

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
76 được thực thi nếu bạn nhấp vào nút có giá trị id là
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
77. Các hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
3,
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
4 và
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
5 phối hợp với nhau để tạo mã màu hex ngẫu nhiên và được lưu vào biến
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
21

Sau đó, phần tử có giá trị id là

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
22 được chọn. Hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
23 nhận hai tham số, tham số đầu tiên là tên thuộc tính (là
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
24) và tham số thứ hai là giá trị của thuộc tính đó (là giá trị của biến
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
21 ở đây)

ĐẦU RA

javascript random color generator - ouput one

Sử dụng Hàm //slice function example, if beginIndex is a negative number var my_string = "test".str.slice(-2); //it will return "st". 26 và //Syntax with one parameter slice(beginIndex); //Syntax with two parameters slice(beginIndex, endIndex); 9 để tạo màu ngẫu nhiên JavaScript

Phương pháp này minh họa việc sử dụng thư viện jQuery và các hàm

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
9 để tạo bộ tạo màu ngẫu nhiên JavaScript. Chúng ta hãy xem các phương thức được sử dụng để tạo các chuỗi thập lục phân ngẫu nhiên

Hàm JavaScript //Syntax with one parameter slice(beginIndex); //Syntax with two parameters slice(beginIndex, endIndex); 9

Hàm

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
30 trả về số lớn nhất (có thể nhỏ hơn hoặc bằng số đã cho)

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
9

Hàm

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
31 đã được giải thích trong Phương pháp đầu tiên. Bạn có thể nhảy đến đó hoặc kiểm tra liên kết này để hiểu. Bạn có thể sử dụng mã ví dụ sau để thực hành

Mã HTML

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
1

Mã CSS

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
2

Mã JavaScript

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
3

Trong mã này,

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
76 sẽ được thực thi nếu bạn nhấp vào nút có giá trị id là
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
77. Một phương thức khác
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
34 được thực thi trong hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
76. Hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
34 có một biến tên là
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
37 đại diện cho các chữ cái thập lục phân.
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
38 chuyển đổi nó (số đã cho) thành mã thập lục phân và trả về giá trị cho hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
76

Bây giờ, hàm

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
76 đặt giá trị của thuộc tính CSS bằng hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
91. Hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
91 nhận hai tham số. Đầu tiên, tên thuộc tính là
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
24 và giá trị thuộc tính được trả về bởi hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
34. Mặc dù,
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
95 đang hoạt động như một
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
96 nhưng bạn không thể sử dụng nó với hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
91 (hãy xem dòng mã sau)

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
0

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
1

Tuy nhiên, bạn có thể đặt thuộc tính CSS bằng cách sử dụng

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
96 như sau

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
2

ĐẦU RA

javascript random color generator - ouput two

Bạn cũng có thể tối ưu hóa mã JavaScript của mình bằng cách kết hợp Phương pháp 1 và Phương pháp 2. Thay thế phần sau bằng mã JavaScript của bạn và quan sát đầu ra

Mã JavaScript

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
3

ĐẦU RA

javascript random color generator - ouput three

Sử dụng hàm //Syntax with one parameter slice(beginIndex); //Syntax with two parameters slice(beginIndex, endIndex); 99 để tạo màu ngẫu nhiên JavaScript

Bạn có muốn tạo trình tạo màu tối ngẫu nhiên bằng JavaScript không? . Nó là phần mở rộng của

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
15. Hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
10 hiển thị màu sáng theo giá trị của bốn tham số của nó

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
4

Sau đây là mã khởi động cho bạn

Mã HTML

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
1

Mã CSS

//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
2

Mã JavaScript

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
7

Trong đoạn mã này, hàm có tên

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
76 được thực thi nếu ai đó nhấp vào nút có giá trị id là
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
77. Số ngẫu nhiên được tính bằng hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
31 và được truyền vào vị trí của tham số
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
11. Các giá trị của
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
12,
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
13 và
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
14 là
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
24,
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
25 và
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
26. Hàm
//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
91 đặt
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
24 với giá trị được trả về bởi hàm
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
10

ĐẦU RA

javascript random color generator - ouput four

kết luận

Chúng ta đã học cách sử dụng các hàm

//Syntax with one parameter
slice(beginIndex);
//Syntax with two parameters
slice(beginIndex, endIndex);
9,
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
0 và
//slice function example, if beginIndex is a negative number
var my_string = "test".str.slice(-2); //it will return "st".
10 cho bộ tạo màu ngẫu nhiên JavaScript. Chúng tôi đã biết về các cách khác nhau để lấy mã hex ngẫu nhiên và đặt thuộc tính màu nền trong JavaScript bằng cách sử dụng mã hex đó. Chúng tôi cũng đã học cách hiển thị màu sáng và tối một cách ngẫu nhiên

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

nền const = tài liệu. getElementById("nền");
const getRandomNumber = (giới hạn) => {
trả về môn Toán. tầng (Toán. ngẫu nhiên () * giới hạn);
const setBackgroundColor = () => {
const h = getRandomNumber(360);

Làm cách nào để tạo sắc thái của một màu JavaScript?

màu sắc var = tài liệu. getElementsByClassName('khối');
for (i = 0; i < màu. chiều dài;
var colorValue = cửa sổ. getComputingStyle(colors[i]). getPropertyValue('nội dung');
colors[i]. insertAdjacentHTML('beforeend', ''+ colorValue. replace(/['"#]+/g, '') +'');.