java web 字体颜色循环变化 js实现

最新推荐文章于 2023-07-24 14:32:03 发布

原创最新推荐文章于 2023-07-24 14:32:03 发布 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JAVA WEB 专栏收录该内容

15 篇文章

订阅专栏

博客提及使用setInterval()函数来设定颜色刷新的时间间隔，还涉及到js部分内容，主要围绕前端开发中利用该函数实现特定功能。

setInterval()函数设定颜色刷新的时间间隔

<div id="baip">
		<h2 class="title" id="character1" >天黑</h2> 			
		<h4 id="character2">请睁眼</h4>		
		</div>

js部分

	
	<script type="text/javascript" language="javascript">
         
    var i=0;
    setInterval('changeColor()',500);
        function changeColor(){
            var div1=document.getElementById('character1'); 
            var div2=document.getElementById('character2'); 
            var colorArr1=['#8A2BE2','#DEB887','#7FFF00','#008B8B','#FF1493','#DA70D6','#B0C4DE']; 
            var colorArr2=['#DEB887','#7FFF00','#008B8B','#FF1493','#DA70D6','#B0C4DE','#8A2BE2']; 
            if(i==colorArr1.length&&i==colorArr2.length){ 
                    i=0;
                }else{
                    div1.style.color=colorArr1[i++%colorArr1.length]; //循环颜色
                    div2.style.color=colorArr2[i++%colorArr2.length]; 
                }
            }
        
</script>

在这里插入图片描述