在H1的随机色的词 [英] Random coloured words in a H1

问题描述

可以让H1中的每个字词都是随机颜色，如果您刷新页面，这些字词会再次随机化？

我有5种颜色我想用。

是的，这是可能的：

<$>

p $ p> var colors = ['red'，'yellow'，'blue'，'green'，'black'];
$（'h1'）。每个函数（）{
$（this）.html（$（this）.text
return'< span style =color：'+ colors [Math.floor（Math.random（）* colors.length）] +'>'+ v +'< / span>';
}）。join（''））;
}）;


主要想法是将每个h1的内容拆分为单词，并通过将它们嵌入< span> 只是一个元素。

示范

Is it possible to have each word in a H1 a random colour and that if you refresh the page these will then be randomised again?

I have 5 set colours I want to use. How would I code this ?

解决方案

Yes, that's possible :

var colors = ['red', 'yellow', 'blue', 'green', 'black'];
$('h1').each(function(){
    $(this).html($(this).text().split(' ').map(function(v){
        return '<span style="color:'+colors[Math.floor(Math.random()*colors.length)]+'">'+v+'</span>';
    }).join(' '));
});​​​​​​

The main idea is to split the content of each h1 into words and replace the words by embedding them in <span> as you can't style a word but only an element.

Demonstration

这篇关于在H1的随机色的词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！