Bagaimana untuk Menjana Warna HEX Rawak dalam JavaScript? [Panduan Mudah]

Dalam artikel ini, saya akan membimbing anda mencipta fungsi JavaScript yang menjana kod warna heks rawak yang terdiri daripada gabungan nombor dan abjad.

Fungsi ini menjana warna heks rawak setiap kali ia dilaksanakan:

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. Menjana Nombor Rawak

Dalam langkah pertama kita perlu menjana nombor rawak dan kita boleh melakukannya dengan mudah menggunakan Objek Matematik JavaScript dan Kaedah rawak() Matematik.

Jika anda mencipta kaedah rawak biasa maka ia akan memberi anda nombor perpuluhan rawak lihat contoh di bawah:

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

Tetapi kita perlu menjana nombor rawak antara 0 dan 16777215, anda mungkin terfikir mengapa saya memerlukan 16777215 dan bukannya "999999" atau mana-mana nombor enam digit dengan baik kita perlu menggunakan nombor lapan digit ini kerana nombor 16,777,215 ialah nilai tertinggi yang boleh anda miliki dengan kod warna heks enam digit.

Kod warna heks menggunakan enam digit, di mana setiap digit boleh dari 0 hingga 9 atau A hingga F, memberikan 16 pilihan yang mungkin untuk setiap digit.

Ini bermakna anda boleh mencipta sejumlah 16,777,216 warna berbeza dengan enam digit. Kod warna heks terbesar ialah #FFFFFF, yang sepadan dengan 16,777,215 dalam perpuluhan.

Jadi, dengan menggunakan nombor sehingga 16,777,215, anda boleh menutup semua kemungkinan warna yang diwakili oleh kod heks enam digit, termasuk yang mengandungi aksara abjad. Ini memastikan setiap warna yang mungkin, sama ada menggunakan digit atau huruf, disertakan.

Jangan lupa untuk membalut kaedah Math.random() di dalam Math.floor() untuk memastikan anda mendapat nombor bulat dan mengelakkan nilai perpuluhan.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. Menukar Nombor kepada Rentetan perenambelasan

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

Kini kita perlu menukar nombor itu kepada rentetan perenambelasan, yang boleh dilakukan dengan mudah menggunakan kaedah toString(16).

Hanya gunakan kaedah toString(16) pada nombor rawak dan hantar 16 sebagai hujah untuk menukarnya kepada rentetan perenambelasan.

Kaedah ini memastikan bahawa kod yang terhasil termasuk hanya digit dan huruf dari 0 hingga F, tanpa sebarang aksara melebihi F.

Juga Baca: Kod Penjejakan Analitis Google dalam Next.js [Panduan Sediakan]

3. Tambah Kaedah padStart

Fungsi kami hampir siap. Walau bagaimanapun, terdapat kemungkinan isu: kadangkala kod warna hex yang dijana mungkin hanya 5 aksara dan bukannya 6.

Jika fungsi mengembalikan kod warna hex 5 aksara, ia tidak akan sah. Untuk membetulkan perkara ini dan memastikan kami sentiasa mendapat kod warna hex 6 aksara, kami perlu menambahkan kaedah padStart pada kod tersebut.

Kaedah padStart(6, '0') akan memastikan kod warna sentiasa kod 6 digit dengan menambahkan sifar pendahuluan jika perlu.

Sebagai contoh, jika kod hex ialah A9A9A dan mengandungi lima aksara sahaja, kaedah padStart(6, '0') akan menambah 0 pendahuluan untuk menjadikannya kod warna enam digit, menghasilkan 0A9A9A. Ini memastikan bahawa fungsi sentiasa mengembalikan kod warna hex yang diformat dengan betul dengan tepat enam aksara.

4. Kembalikan Kod Hex yang Dijana

Langkah terakhir ialah mengembalikan kod warna heks rawak yang dijana supaya ia boleh digunakan dengan mudah di mana sahaja diperlukan.

Saya mahu menggunakan rentetan templat untuk membalut kod warna dan menambah # pada permulaan, jadi saya tidak perlu menambah # secara manual setiap kali saya menggunakan fungsi ini.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

Kesimpulan

Apabila saya mula-mula mencipta penjana warna heks rawak dalam JavaScript, ia hanya menghasilkan warna gelap atau kusam kerana ia tidak menyertakan sebarang aksara abjad.

Selepas membuat beberapa perubahan pada kod, akhirnya saya mencapai hasil yang diingini. Saya juga berharap siaran ini telah menjimatkan masa anda dalam mencipta fungsi yang serupa.

Kongsi siaran ini dengan rakan anda yang sedang mencari projek baharu atau ingin membina sesuatu menggunakan JavaScript!

Baca Juga: Cara Melumpuhkan Kod HTML tanpa Memadam [3 Kaedah]

Atas ialah kandungan terperinci Bagaimana untuk Menjana Warna HEX Rawak dalam JavaScript? [Panduan Mudah]. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!