Implementing Random Color Transition of a 3x3 Grid with JavaScript

Effect as follows:

图（1）　 Initial image

图（2）　 Start flash

The code is as follows:

<!DOCTYPE html>
<html>
<head>
 <title>Lo-shu Grid</title>
 <style type="text/css">
 div{
 width:190px;
 height:190px;
 background:#FFA600;
 float:left;
 margin:10px;
 border-radius: 10px;
 }
 body{
 width:700px;
 margin:0 auto;
 }
 button{
 clear:both;
 width:200px;
 height:50px;
 background:#FFF;
 border:none;
 border-radius:10px;
 position:relative;
 left:100px;
 }
 button:hover{
 background:#FFA600;
 }
 </style>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <button id="btnone">Start flash</button>
 <button id="btntwo">End flash</button>
 <script type="text/javascript" >
 var div=document.getElementsByTagName('div');
var colors=['red','plum','blue','green','cyan','black','pink','gray','brown'];
btnone.onclick=function(){//Click start
 c=setInterval(function(){//Use timer
 start();//Call function
 },1000)//Set time
}
btntwo.onclick=function(){//Stop button
 for(i=0;i<div.length;i++{//Loop
 div[i].style.background="#FFA600";//Traverse and clear colors
 }
 clearInterval(c);//Stop the timer
}
function start(){
 for(var i=0;i<div.length;i++{//Set the background every time a random color is generated
 div[i].style.background="#FFA600";
 }
 var arr=new Array(3);//Create an array to hold random numbers
 var arr1=new Array(3);
 for(var i=0;i<arr.length;i++{//Create the first group of arrays
 var a=parseInt(Math.random()*9); 
 console.log(a);
 if(i==0){//The first number is directly imported into the array
 arr[i]=a;
 }else{
 for(var j=0;j<i;j++{//Judge the second and third numbers
 if(a==arr[j]){//If repeated, start over
  i--
 }else{
  arr[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr1.length;i++{//Same as above. Random color
 var a=parseInt(Math.random()*9); 
 if(i==0){
 arr1[i]=a;
 }else{
 for(var j=0;j<i;j++{
 if(a==arr1[j]){
  i--
 }else{
  arr1[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr.length;i++{
 div[arr[i]].style.background=colors[arr1[i]];//Give random colors to random addresses
 }
}
 </script>
</body>
</html>

That's all for this article. I hope the content of this article can bring you some help in learning or work, and I also hope to get more support for the Yelling Tutorial!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial