我想把文本用JS 实现颜色无限循环 要怎么写

JavaScript08

我想把文本用JS 实现颜色无限循环 要怎么写,第1张

<p id=ss>一段P标签里面的文本我想把他实现几种颜色无限循环请问下改怎么弄啊用JS</p>

<script>

var cs=["#00f","#0ff","#ff0","#f00","#f0f","#0f0","#f80","#8f0","#80f"] //颜色，可添加

var ci=0

window.onload=()=>{

   ss.innerHTML=ss.innerHTML.split("").map(e=>"<span>"+e+"</span>").join("")

   setInterval(()=>{

      var s=ss.children

      for(var i=0i<s.lengthi++){

         s[i].style.color=cs[(ci+i)%cs.length]

      }

      ci=++ci%cs.length

   },200)

}

</script>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>循环填充数据</title>

<style type="text/css">

td{

width: 50px

height: 50px

}

</style>

</head>

<body>

<table border="1" cellspacing="0" cellpadding="0">

<tr><th colspan="6">数据表格</th></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

</table>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

//模拟后台数据，数据量可变

var data = [{

message:"数据1"

},

{

message:"数据2"

},

{

message:"数据3"

},

{

message:"数据4"

},

{

message:"数据5"

},

{

message:"数据6"

},

{

message:"数据7"

},

{

message:"数据8"

},

{

message:"数据9"

},

{

message:"数据10"

}

]

var tdarr = $("td")//获取表格数量

var num1 = Math.floor(tdarr.length / data.length)//取商 表格数量除以后台数据数量

var num2 = tdarr.length % data.length//取余 表格数量除以后台数据数量

//console.log("num1:"+num1)

//console.log("num2:"+num2)

//将能整除的部分循环填充后台数据

for(var i=0i<num1i++){

$.each(data,function(index){

//console.log(index+i*data.length)

//console.log(data[index].message)

$(tdarr[index+i*data.length]).text(data[index].message)

})

}

//如果不能整除即取余不为0，则再循环补填未填充的表格

for(var i=0i<num2i++){

$(tdarr[data.length*num1+i]).text(data[i].message)

}

</script>

</body>

</html>