تحقيق التبديل اللوني العشوائي للقوائم التسعة باستخدام js

النتيجة كالتالي:

الشكل (1)　الشكل الأول

图（2）　开始闪

代码如下：

<!DOCTYPE html>
<html>
<head>
 <title>九宫格</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">开始闪</button>
 <button id="btntwo">结束闪</button>
 <script type="text/javascript" >
 var div=document.getElementsByTagName('div');
var colors=['red','plum','blue','green','cyan','black','pink','gray','brown'];
btnone.onclick=function(){//点击开始
 c=setInterval(function(){//使用定时器
 start();//调用函数
 },1000)//设置时间
}
btntwo.onclick=function(){//停止按钮的
 for(i=0;i<div.length;i++){//循环
 div[i].style.background="#FFA600";//遍历清除颜色
 }
 clearInterval(c);//停止定时器
}
function start(){
 for(var i=0;i<div.length;i++){//每次随机颜色时遍历将背景设置好
 div[i].style.background="#FFA600";
 }
 var arr=new Array(3);//إنشاء مجموعة تحتوي على أرقام عشوائية
 var arr1=new Array(3);
 للدوران var i=0;i<arr.length;i++{//إنشاء مجموعة أولى من التجميعات
 var a=parseInt(Math.random()*9); 
 console.log(a);
 if(i==0){//يُدرج الرقم الأول مباشرة في التجميع
 arr[i]=a;
 }
 للدوران var j=0;j<i;j++{//الرقم الثاني والثالث يحددان
 if(a==arr[j]){//إذا كان هناك تكرار، يبدأ من جديد
  else{
 }
  arr[i]=a;
 }
 }
 }
 }
 للدوران var i=0;i<arr1.length;i++{//كما هو الحال. لون عشوائي
 var a=parseInt(Math.random()*9); 
 if(i==0){
 arr1[i]=a;
 }
 للدوران var j=0;j<i;j++{
 if(a==arr1[j]){
  else{
 }
  arr1[i]=a;
 }
 }
 }
 }
 للدوران var i=0;i<arr.length;i++{
 div[arr[i]].style.background=colors[arr1[i]];//إعطاء لون عشوائي ل عنوان عشوائي
 }
}
 </script>
</body>
</html>

هذا هو نهاية محتوى هذا المقال، نأمل أن يساعد محتوى هذا المقال في تعليمكم أو عملكم، ونأمل أيضًا في دعم تعليمات الصراخ!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق الطبع والتأليف مملوكة للمالك الأصلي، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت بتحميله自行، ويملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى يدويًا، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا رأيت محتوى يشتبه في انتهاك حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (أثناء إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لتقديم الشكوى، وقدم الدليل على الأدلة، وسيقوم هذا الموقع بتعديل المحتوى المزعوم بشكل فوري إذا تم التحقق من صحة الشكوى.

تعليمية الأساس

سيكون لك أن تحب