大家都喜欢抽奖吧,(不，应该都喜欢中奖吧，学会这个让你100%中奖)！

最新推荐文章于 2022-05-06 10:38:18 发布

M先生的差不多人生

最新推荐文章于 2022-05-06 10:38:18 发布

阅读量432

点赞数 2

文章标签：不说脏话

本文链接：https://blog.csdn.net/qq_41574975/article/details/89387241

版权

小秀一下，依然简单的一塌糊涂
整体布局~~很简洁~~ ，基本就用了遍历（for循环）
难点：点击抽奖，光标会按顺序（顺时针或逆时针）旋转，所以只排序光标会一横走完，然后下一横继续，那怎么解决这个问题呢这就得用到：数组

进入正题吧

基础 声明一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>抽奖</title>
</head>
<body>
 
</body>
</html>

CSS样式

<style type="text/css">
      *{
      	 margin: 0;
      	 padding: 0;
      }
      .box{
      	 width: 600px;
      	 height: 600px;
         margin: 0 auto;
      }
      .jp,.click{
      	 width: 195px;
      	 height: 195px;
      	 background: skyblue;
      	 float: left;
      	 margin-right: 5px;
      	 margin-bottom: 5px;
      }
      .click{
      	 text-align: center;
      	 line-height: 195px;
      }
      #start,#stop{
      	 width: 70px;
      	 height: 30px;
      	 background: green;
      	 color: white;
      	 border: none;
      }
	</style>

代码body中主要代码

<div class="box">
	<div class="jp"></div>
	<div class="jp"></div>
	<div class="jp"></div>
	<div class="jp"></div>
	<div class="click">
        <button id="start">开始</button>
        <button id="stop" "stop()">停止</button>
	</div>
	<div class="jp"></div>
	<div class="jp"></div>
	<div class="jp"></div>
	<div class="jp"></div>
</div>

script中，重点得圈起来

    var jp = document.getElementsByClassName("jp");       //寻找定义class类的div标签
    var shuliang = [0,1,2,4,7,6,5,3];           //来一串数组，**重点**
    var num = 0;								//变量f初始值
    var timer = null;							//空
    start.onclick = function(){					//点击开始按钮**点击方法**
      clearInterval(timer);						//清楚时间函数
      timer = setInterval(function(){		//设置时间间隔
        var a = shuliang[num];					//数组下标为0的（就是第一个）
        for (var i = 0; i < shuliang.length; i++) {		 	//for循环，来让光标，也就是背景色循环起来
            jp[i].style.background = "skyblue";				//设置类名为jp的背景色
        };
        jp[a].style.background = "hotpink";					//设置类名下标0的jp的背景色
        num++;											//累加
        if(num==shuliang.length){				//判定num等于shuliang的长度
          num=0;											//num给它重新定义
        }
      },10);													//背景光标的旋转秒数
    }
    function stop(){									//停止按钮方法
      if(timer!=null){									//判断是否为空
        clearInterval(timer)							//如果为true给它空值
      }
    }