[英]Insert a random number in to an inline style for a background color
I'm trying to output a random number between 0-360 in to and inline style tag using javascript or jquery but I can't seem to figure out how. 我正在尝试使用javascript或jquery输出0至360之间的随机数,并使用javascript或jquery输出内联样式标签,但我似乎无法弄清楚该怎么做。 Any help would be greatly appreciated.
任何帮助将不胜感激。
Fiddle attached here - https://jsfiddle.net/4c59f6aw/ 小提琴附着在这里- https://jsfiddle.net/4c59f6aw/
<div style="background-color:hsl('value to go here', 100%, 50%)"></div>
One simple way to do is, is to add the CSS via JavaScript. 一种简单的方法是通过JavaScript添加CSS。
The first line takes a number that is random (up to 360) and the second and third line get the #box
div and add the color dynamically. 第一行使用一个随机数(最多360),第二行和第三行使用
#box
div并动态添加颜色。 So every page refresh, a different color will be added to the box. 因此,每次刷新页面时,都会将不同的颜色添加到框中。
The background-color
notation might look strange. background-color
表示法可能看起来很奇怪。 It's called template strings and you can read more about it at MDN . 它称为模板字符串 ,您可以在MDN上阅读有关它的更多信息。
I don't know why you tagged jQuery to your question, as it is a library and needs to be downloaded by the client. 我不知道为什么要在问题上标记jQuery,因为它是一个库,需要由客户端下载。 It's not needed to achieve the result that you want to.
不需要达到您想要的结果。
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>
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>
Check this code snipet 检查此代码片段
Using Jquery
使用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>
Using Javascript
使用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>
Pure Javascript solution here 纯Javascript解决方案在这里
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.