JS实现九宫格跑马灯效果

2018年5月13日19:20:45 4 阅读(5,642)
摘要

用JS来实现,点击开始随机选取三个元素,并且给元素随机赋值(rgb颜色),改变元素的默认颜色,用定时器,每1s执行一次这个方法,当点击停止,则恢复为默认颜色。

思路是,先用div+css写一个九宫格的布局,长这样:

JS实现九宫格跑马灯效果

代码是这样:

  1. <style type="text/css">
  2.         .nine{
  3.             float:left;
  4.             width:30%;
  5.             padding-top:30%;
  6.             margin:1%;
  7.             background: rgb(255,193,37);
  8.             border-radius: 25px;
  9.         }
  10.         input{
  11.             display: block;
  12.             width: 40%;
  13.             margin: 0 auto 1em auto;
  14.             border-radius: 25px;
  15.             border: 0px;
  16.         }
  17.         .layout{
  18.             width: 40%;
  19.             margin:0 auto;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div class="layout">
  25. <div class="nine" id="1"></div>
  26. <div class="nine" id="2"></div>
  27. <div class="nine" id="3"></div>
  28. <div class="nine" id="4"></div>
  29. <div class="nine" id="5"></div>
  30. <div class="nine" id="6"></div>
  31. <div class="nine" id="7"></div>
  32. <div class="nine" id="8"></div>
  33. <div class="nine" id="9"></div></div>
  34. <input type="button" onclick="start()" value="跑马灯开始">
  35. <input type="button" onclick="end()" value="跑马灯结束">
  36. <script src="js1.js"></script>
  37. </body>  、

接下来用js来与九宫格交互,首先,获取随机生成的颜色RGB值:

  1. /*rgb随机颜色*/
  2. function bg(){
  3.     var r = Math.floor(Math.random() * 256); //随机生成一个小于256的值
  4.     var g = Math.floor(Math.random() * 256);
  5.     var b = Math.floor(Math.random() * 256);
  6.     //console.log(r,g,b)
  7.     return "rgb("+r+','+g+','+b+");"
  8. }

然后创建一个数组,并把颜色RGB值赋给随机产生的三个九宫格元素:

  1. /*改变元素的颜色*/
  2. function change(){
  3.     for(var i= 1;i<10;i++){
  4.         document.getElementById(i).style.background = "rgb(255,193,37)";
  5.     }
  6.     var m = new Array(3);
  7.     for (var i=0;i<3;i++) {
  8.         if (m[0]==m[1]||m[0]==m[2]||m[1]==m[2]) //判断产生的数字是否一样
  9.         {
  10.             m[0] = Math.floor(Math.random() * 9)+1;
  11.             m[1] = Math.floor(Math.random() * 9)+1;
  12.             m[2] = Math.floor(Math.random() * 9)+1;
  13.         }
  14.         var x = document.getElementById(m[i]);
  15.         x.style = "background:" +bg();
  16.     }
  17.     console.log(m);
  18. }

最后设置定时器,开始设置为1s执行一次,结束后恢复默认颜色:

  1. /*定时器开始 1000毫秒执行一次change函数*/
  2. function start(){
  3.     str = setInterval(change,1000);//str是定时器的ID
  4.     console.log(str);
  5. }
  6. /*定时器结束并恢复默认的颜色*/
  7. function end(){
  8.     clearInterval(str);//清除定时器
  9.     for(var i= 1;i<10;i++){
  10.         document.getElementById(i).style.background = "rgb(255,193,37)";
  11.     }
  12. }

最后效果图:

JS实现九宫格跑马灯效果

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:4   其中:访客  2   博主  2

    • Koolight Koolight 1

      会玩啊,懂代码真好!

        • 舍得 舍得

          @Koolight :mrgreen: 你也可以的。

        • 夏沫浅笑 夏沫浅笑 0

          嗯,我来留言啦,留言个啥好呢,嗯,百度排名第一的祝福可以不?