制作简易九宫格抽奖

张细枝

已于 2024-01-02 16:46:17 修改

阅读量2.2k

点赞数

文章标签： javascript 前端开发语言

于 2019-04-15 19:34:14 首次发布

本文链接：https://blog.csdn.net/weixin_44884650/article/details/89318944

版权

制作九宫格抽奖
简单思路：进行简易的布局，
了解抽奖机的运行方法（顺时针旋转）
开始与停止两个按钮在最中间
主要运用的知识点
定时器的设置与清除

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .Box{
        width: 660px;
        margin: 0 auto;
        margin-top: 200px;
    }
    .kuai,
    .ss{
        width: 200px;
        height: 200px;
        background: hotpink;
        float: left;
        margin: 10px;
    }
    .ss{
        text-align: center;
        line-height: 200px;
    }

    </style>
</head>
<body>
<div class="Box">
    <div class="kuai"></div>
    <div class="kuai"></div>
    <div class="kuai"></div>
    <div class="kuai"></div>
    <div class="ss">
        <button id="ks">开始</button>
    	<button id="stop">停止</button>
    </div>
    <div class="kuai"></div>
    <div class="kuai"></div>
    <div class="kuai"></div>
    <div class="kuai"></div>
</div>
//这里使用div来布局
    
</body>
<script type="text/javascript"> 
    var div = document.getElementsByClassName('kuai')
    //获取除去中间的其余8个div（数组形式）
    var arr = [0,1,2,4,7,6,5,3]
    **//这是实现顺时针旋转的关键
    //上面获取到了8个div，并且是数组形式，所以这个数组来存放我们想要变色的div所对应的索引**
    var num = 0   //设置一个空值 
    var a = 0   //设置一个用来自增的空值
    var timer = null  //方便计时器开始与结束
        ks.onclick = function  (){
            clearInterval(timer)     //在开启一个计时器之前关闭一个，这样就不会造成点击多代码执行时间加速问题
           timer = setInterval(function(){
            num = arr[a]  //将数组arr的每个索引对应的值赋予num
            for (var i = 0; i < arr.length; i++) {
                div[i].style.background = "hotpink"  //先给所有div设置统一背景色
            };
            div[num].style.background = "blue" //再设置索引为num的div为其他颜色
            a++    //使a自增    所以每次num的值都会按照arr的内容变化，达到顺时针的效果
            if (a==arr.length) {
                  a = 0    
            };//判断让转盘首尾连接
        },50)    };
      let stopBtn = document.getElementById('stop')
			stopBtn.onclick = function () {
  			if (timer != null) {
   			 clearInterval(timer)
  		}
} //用来清除计时器
</script>
</html>

张细枝

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
制作简易九宫格抽奖

制作九宫格抽奖简单思路：进行简易的布局，了解抽奖机的运行方法（顺时针旋转）开始与停止两个按钮在最中间主要运用的知识点定时器的设置与清除<html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style ty...
复制链接

扫一扫