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;
  17.         }
  18.         .layout{
  19.             width: 40%;
  20.             margin:0 auto;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="layout">
  26. <div class="nine" id="1"></div>
  27. <div class="nine" id="2"></div>
  28. <div class="nine" id="3"></div>
  29. <div class="nine" id="4"></div>
  30. <div class="nine" id="5"></div>
  31. <div class="nine" id="6"></div>
  32. <div class="nine" id="7"></div>
  33. <div class="nine" id="8"></div>
  34. <div class="nine" id="9"></div></div>
  35. <input type="button" onclick="start()" value="跑马灯开始">
  36. <input type="button" onclick="end()" value="跑马灯结束">
  37. <script src="js1.js"></script>
  38. </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
      回复 2018年5月18日 下午7:46   板凳

      会玩啊，懂代码真好！

        • 舍得 舍得
          回复 2018年5月18日 下午8:22

          @Koolight :mrgreen: 你也可以的。

        • 夏沫浅笑 夏沫浅笑 0
          回复 2018年5月14日 下午7:54   沙发

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