标签中的字体颜色随机生成

结果展示

html部分

    <div class="box">
         <div class="box-center">
              <div class="box-left">
                    <div class="box-two">
                        <div class="app-txt">
                            那些年我们很好~
                        </div>
                     </div>
                </div>
            </div>

随机获取数组中的色值

***实现的功能： ***

获取标签中的内容，从数组中随机获取一个色值，使标签中的内容前面四个字为一个随机色值，后面的内容为一个随机色值。

步骤如下

1. 用each遍历获取相同className中的内容；
2. 从数组中随机获取一个色值；
3. 将获取的文字内容去除空格，进行切分，分为两部分，第一部分为4个字，后面整体为一部分；
4. 从数组中随机再获取一个色值，判断两个色值不一样；
5. js动态设置文字颜色；
6. 切分的两部分文字进行拼接；
7. 渲染到页面上。

// 随机颜色
var color= ["#D0021B", "#417505", "#9013FE", "#002EFA", "#417505", "#9013FE", "#8b572a", "#002EFA", "#BD10E0", "#ff5a00", "#3FA536", "#B92281"];

//遍历获取相同classname中的内容
 $('.app-txt').each(function(index,dom){    
    var txt=$(this).html();

//去除内容中的空格
    var txt=txt.replace(/\s*/g,"");

//对内容进行切分
    var txt4=txt.substring(0, 4)
    var end=txt.substring(4,end);

//从数组中随机获取
//此时获取的是色值所在数组中的序号
    var col=Math.round(Math.random()*color.length)
    var col2=Math.round(Math.random()*color.length)

//判断两个色值是否一样
    if(col!=col2){

//对文字进行颜色设置
//拼接两段文字
//渲染到界面上
        var txt4=$(this).html("<font color="+color[col-1]+">"+txt4+"</font>"+"<font color="+color[col2-1]+">"+end+"</font>");
    }   

 })

总结

1.需要遍历获取内容
2.使用substring(start,end)对文字进行切分
3.使用 font 标签对文字颜色进行设置
4.html渲染到页面上