使用圆中的数组更改背景颜色项目
Changing background colors items using an array in a circle
我有一个特殊的挑战,正在扼杀我,因为我不知道如何做我想做的事。
我有5个项目:4个div,宽度和高度分别为50px和正文。
我想创建一个函数来设置这些项目的背景颜色,例如:
var colors = ['red', 'blue', 'green', 'black', 'pink'];
div1 = red
div2 = blue
div3 = green
div4 = black
body = pink
如果浏览器重新加载,它们就会改变:
div1 = pink
div2 = red
div3 = blue
div4 = green
body = black
如果浏览器发生同样的变化。。。
有任何jquery插件可以做到这一点吗?我不知道从哪里开始。。我已经在一个函数中创建了带有项的数组:
HTML:
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
JS:
function changeColors() {
var colors = ['red', 'blue', 'green', 'black', 'pink'];
}
changeColors();
您可以使用以下函数随机洗牌数组:
<script type="text/javascript">
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
</script>
这就是如何应用它:
<script type="text/javascript">
var colors = ['red', 'blue', 'green', 'black', 'pink'];
shuffle(colors);
// and your code to assign colors to divs and body
</script>
如果希望每次加载页面时更改值,则需要使用localStorage
或cookie。以下是使用localStorage
:的示例
var colors = ['red', 'blue', 'green', 'black', 'pink'];
if(localStorage.count)
{
localStorage.count = (localStorage.count + 1) % colors.length;
}
else
{
localStorage.count = 0;
}
for(var i = 0; i < colors.length; i++)
{
var color = colors[(localStorage.count + i) % colors.length];
//Set the i'th element's back-color to color
}
这里有一个Fiddle,展示了模方法如何工作的例子
这应该是一项非常简单的任务
var colors = ['red', 'blue', 'green', 'black', 'pink'];
var count = 0;
function colorMe() {
$("body").find("div").each(function() {
var index = $("body").find("div").index(this);
var i = (index + count) % colors.length;
$(this).css("background-color", colors[i]);
});
count++;
}
$(window).resize(colorMe);
$(document).ready(colorMe);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>
我认为你的主要问题是确定使用了什么浏览器,所以你可以阅读以下内容:如何检测Safari、Chrome、IE、Firefox和Opera浏览器?然后你可以开始制作代码,根据浏览器的不同来更改颜色。我希望这就是答案。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用jquery更改html中的背景颜色
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- JS幻灯片与CSS背景颜色变化
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- Javascript通过列表项的函数和css来更改背景颜色
- Javascript没有从数组中选择背景颜色
- 使用圆中的数组更改背景颜色项目
- 如何用jquery动画改变背景颜色,就像一个过渡
- 使用jquery交换并保存背景颜色
- j查询如何设置/取消设置下拉菜单的背景颜色
- 使用angularjs根据时间更改背景颜色
- 设置Dojo量表的背景颜色
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- 使用javascript更改任意文本的背景颜色
- 在用Javascript更改背景颜色后:hover don'不要改变颜色
- 图像内部的透明背景颜色不受影响
- jQuery mobile-动态更改ui页面背景颜色
- 切换按钮的背景颜色
- JavaScript更改类的背景颜色