สีแบบสุ่มมีอยู่ในสองรูปแบบ:
Preview Effect: http://wjf444128852.github.io/demolist/js/test/index.html
1. RGB (XXX, XXX, XXX)
2. #XXXXXX
มีการใช้วิธีการสุ่มสองวิธีต่อไปนี้
แนวคิด: วิธีการสุ่ม X
1. XXX ในนั้นเป็นจำนวนเต็มแบบสุ่มระหว่าง 0-255 ใช้ math.random ()*255 เพื่อรับหมายเลขสุ่มระหว่าง 0-255
จากนั้น Math.floor () จะรักษาจุดทศนิยมไว้ก่อน
2. X ในนั้นเป็นการรวมกันแบบสุ่มของ 6 ใน 0123456789ABXDEF
ที่นี่คุณสามารถใช้อาร์เรย์หรือสตริงเพื่อประมวลผลได้ ที่นี่คุณใช้อาร์เรย์ เพียงแค่ใช้เวลา 6 ครั้งจากอาร์เรย์และรับตัวห้อยอาร์เรย์เป็นจำนวนเต็มแบบสุ่มระหว่าง 0 ถึง 16 ในแต่ละครั้ง
หมายเหตุ (แม้ว่าการเปลี่ยนแปลงในเมธอด 2 คือ #xxxx แต่เบราว์เซอร์จะตรวจสอบค่าแอตทริบิวต์สีพื้นหลังขององค์ประกอบ DOM ในกรณีนี้ แต่การกำหนดใน JS อยู่ในรูปแบบ #XXX)
รหัสมีดังนี้:
HTML
<body> <div> <p> <a href = "JavaScript:;" id = "btn-one"> randomcolor-rgb </a> </p> <ul> <li> <li> <div> </div> </li> <li> <li> <li> </div> </li> <li> <li> </iv> </li> <li> <li> <div> </div> </li> <li> <li> <div> </div> </li> <li> <li> <div> </div> </li> <li> <li> <li> </div> </li> <li> <li> </iv> </li> <li> <li> <div> </div> </li></ul> </div> </body>
CSS
*{การปรับขนาดกล่อง: Border-Box; รายการสไตล์: ไม่มี; ชายแดน: ไม่มี; Padding: 0; มาร์จิ้น: 0; } p {text-allign: center; มาร์จิ้น: 20px; } PA {ตัวอักษรขนาด: 20px; Font-Weight: 300; สี: #e4393c; การตกแต่งข้อความ: ไม่มี; Padding: 6px 10px; ชายแดน: 1px Solid CurrentColor; } .bg_color, .bg_two {width: 100px; ความสูง: 100px; ชายแดน: 1px Solid #AA00AA; } .main, .main ul {overflow: ซ่อน; } .Main {Width: 400px; มาร์จิ้น: 30px auto; } .main ul li {float: ซ้าย; -JS
<script> (ฟังก์ชั่น () {// 1. ฟังก์ชั่นสีแบบสุ่ม -rgb ฟังก์ชั่น getRandomColor () {var rgb = 'rgb ('+math.floor (math.random ()*255)+','+math.floor (math.random ()*255)+' +math.floor (math.random ()*255) +')'; i = 0; i <divs.length; i ++) {divs [i]. style.backgroundcolor = getRandomColor (); ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd' Math.floor (Math.random ()*16); }) () </script>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น