插入一個隨機數到一個內聯樣式的背景顏色

Question

我想輸出一個0-360之間的隨機數到內聯樣式標籤使用javascript或jquery，但我似乎無法弄清楚如何。任何幫助將不勝感激。

小提琴附在這裏 - https://jsfiddle.net/4c59f6aw/

<div style="background-color:hsl('value to go here', 100%, 50%)"></div> 

Answer 1

一個簡單的方法做的是，是通過JavaScript添加CSS。

第一行取一個隨機的數字（最多360），第二行和第三行取得#box div並動態添加顏色。所以每一次頁面刷新，一個不同的顏色將被添加到框中。

background-color符號可能看起來很奇怪。它被稱爲模板字符串，你可以閱讀更多關於它at MDN。

我不知道爲什麼你將jQuery標記爲你的問題，因爲它是一個庫，需要由客戶端下載。不需要達到你想要的結果。

var randomNumber = Math.floor(Math.random() * 360); 
 

 
var myElement = document.querySelector("#box"); 
 
myElement.style.backgroundColor = `hsl(${randomNumber}, 100%, 50%)`;

div { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<div id="box"></div>

Answer 2

var elements = document.querySelectorAll('.hello'); 
 

 
for(var i=0; i < elements.length; i++) { 
 
    var color = Math.floor((Math.random() * 361) + 0); 
 

 
    elements[i].style.background = 'hsl('+color+', 100%, 50%)'; 
 
}

div { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
    background-color:orange; 
 
}

<div class="hello"></div> 
 
<div class="hello"></div> 
 
<div class="hello"></div> 
 
<div class="hello"></div> 
 
<div class="hello"></div>

Answer 3

入住這一小段代碼片段

使用jQuery

$(function(){ 
 
    $('button').click(function(){ 
 
    
 
    $('#change').css({'background-color': 'hsl('+randomIntFromInterval(0,255)+', 100%, 50%)'});  
 
    }); 
 

 
    function randomIntFromInterval(min,max) 
 
{ 
 
    return Math.floor(Math.random()*(max-min+1)+min); 
 
} 
 
})

div { 
 
    height: 100px; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="change" style="background-color:hsl(126, 100%, 50%)"></div> 
 
<button>Change</button>

使用JavaScript

function change(){ 
 
    var div = document.getElementById('change'); 
 
    div.style.backgroundColor = 'hsl('+randomIntFromInterval(0,255)+', 100%, 50%)'; 
 
} 
 
function randomIntFromInterval(min,max) 
 
{ 
 
    return Math.floor(Math.random()*(max-min+1)+min); 
 
}

div { 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div id="change" style="background-color:hsl(123, 100%, 50%)"></div> 
 
<button onclick="change()">Change</button>

Answer 4

純JavaScript解決方案here

function populate(number, multiplier) { 
    for (var i = 0; i < number; i++) { 
    var div = document.createElement('div'); 
    div.setAttribute('style', 'background-color:hsl(' + i * multiplier +',100%,50%)'); 
    document.body.appendChild(div); 
    } 
} 
populate(4, 30);