我想把文本用JS 实现颜色无限循环 要怎么写
展开全部
<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=0;i<s.length;i++){
s[i].style.color=cs[(ci+i)%cs.length];
}
ci=++ci%cs.length;
},200);
}
</script>
展开全部
上个定时器就行
<P id="p" style="color:red;">abcdef</P>
<script>
var p=document.getElementById("p");
var col=["red","green","blue"];
var i=0;
setInterval(function(){
p.style.color=col[i];
i<col.length-1?i++:i=0;
},1000)
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
使用计时器函数
<body>
<p id="cp">颜色无限循环</p>
<script>
var colors=["red","blue","black","yellow"];
var i=0;
setInterval(function(){
var cp=document.getElementById("cp");
cp.style.color=colors[i];
i++;
if(i==colors.length){
i=0;
}
},500);
</script>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<p id="pid">文字的颜色</p>
<script type="text/javascript">
var colors=['green','red','black','#666','yellow'];//颜色数组,可以随意增减
i=0;
setInterval(function () {//setInterval是每间隔一段时间执行一次的函数,下面设置的1000毫秒
var p = document.getElementById('pid');
p.style.color=colors[i];
i++;//跳到下一个数组的值
i==5?i=0:i=i;//如果到数组末尾了又跳到第一个;
}, 1000);
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>change</p>
<script type="text/javascript">
var color=["red","green","blue","yellow"];
var getP=document.getElementsByTagName('p')[0];
var num=0
setInterval(function(){
num++;
if(num>=color.length){
num=0
}
getP.style.color=color[num]
},500)
</script>
</body>
</html>
//就是这样
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>change</p>
<script type="text/javascript">
var color=["red","green","blue","yellow"];
var getP=document.getElementsByTagName('p')[0];
var num=0
setInterval(function(){
num++;
if(num>=color.length){
num=0
}
getP.style.color=color[num]
},500)
</script>
</body>
</html>
//就是这样
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询