Implementação do efeito de transição de cores aleatórias no grid 3x3 em JavaScript

Efeito conforme abaixo:

图（1）　 Imagem inicial

图（2）　 Iniciar flash

Código a seguir:

<!DOCTYPE html>
<html>
<head>
 <title>Matrix</title>
 <style type="text/css">
 div{
 largura:190px;
 altura:190px;
 background:#FFA600;
 flutuante:left;
 margin:10px;
 borda-radius: 10px;
 }
 body{
 largura:700px;
 margin:0 auto;
 }
 botão{
 clear:both;
 largura:200px;
 altura:50px;
 background:#FFF;
 borda:none;
 borda-radius:10px;
 position:relative;
 esquerda:100px;
 }
 botão: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">iniciar flash</botão>
 <button id="btntwo">parar flash</botão>
 <script type="text/javascript" >
 var div=document.getElementsByTagName('div');
var cores=['vermelho','plum','azul','verde','ciano','preto','rosa','cinza','marrom'];
btnone.onclick=function(){//clicar para começar
 c=setInterval(function(){//usar temporizador
 start();//chamar função
 },1000)//definir tempo
}
btntwo.onclick=function(){//botão de parada
 for(i=0;i<div.length;i++{//Loop
 div[i].style.background="#FFA600";//Varredura para limpar as cores
 }
 clearInterval(c);//Parar o temporizador
}
function start(){
 for(var i=0;i<div.length;i++{//Configurar o fundo de cada cor aleatória
 div[i].style.background="#FFA600";
 }
 var arr=new Array(3);//Criar um array para conter números aleatórios
 var arr1=new Array(3);
 for(var i=0;i<arr.length;i++{//Criar o primeiro grupo de arrays
 var a=parseInt(Math.random()*9); 
 console.log(a);
 if(i==0){//O primeiro número é diretamente importado para o array
 arr[i]=a;
 }else{
 for(var j=0;j<i;j++{//Julgar os segundos e terceiros números
 if(a==arr[j]){//Se repetido, reiniciar
  i--
 }else{
  arr[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr1.length;i++{//
 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]];//Dá cores aleatórias a endereços aleatórios
 }
}
 </script>
</body>
</html>

Isso é tudo o que há no artigo, esperamos que o conteúdo deste artigo ajude a aprendizagem ou ao trabalho de todos, e esperamos que recebam mais apoio ao tutorial de gritos!

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário dos direitos autorais, foi submetido e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)

Tutorial básico