1. 程式人生 > 其它 >java web 字型顏色迴圈變化 js實現

java web 字型顏色迴圈變化 js實現

技術標籤:JAVA WEB

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>	

在這裡插入圖片描述