九宫格抽奖

时间 2019-11-08

标签九宫抽奖繁體版

原文原文链接

看了一下本身以前的笔记，6月7月都只有两篇，九月只有四篇，这个月要过去了，一篇尚未。真是变成咸鱼了，每天混吃等死。想了想，大方向的没有学习，实在不想学就写一些简单demo。html

九宫格抽奖，用到的很少，先看效果：jquery

由于变成gif的缘由，看起来会有跳过一些，实际是不会的。数组

说说思路，首先是布局，布局有两种方式：bash

这一种要用样式控制好，而后按顺序，而效果图的布局是这样的：函数

这种布局就要用js去修改一下。布局

直接上代码：学习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>九宫格</title>

    <style>

        .wrap {

            width: 600px;

            height: 600px;

            margin: 0 auto;

        }

        .main {

            width: 600px;

            height: 600px;

        }

        .num {

            width: 200px;

            height: 200px;

            float: left;

            text-align: center;

            line-height: 200px;

            font-size: 40px;

            box-sizing: border-box;

            border: solid 1px red;

        }

    </style>

</head>

<body>

<div class="wrap">

    <div class="main">

        <div class="num">1</div>

        <div class="num">2</div>

        <div class="num">3</div>

        <div class="num">4</div>

        <div class="num" id="start">抽奖</div>

        <div class="num">5</div>

        <div class="num">6</div>

        <div class="num">7</div>

        <div class="num">8</div>

    </div>

</div>

<script src="../../js/jquery-3.1.1.min.js"></script>

<script>

    var divNum = document.getElementsByClassName('num');

    var startBtn = document.getElementById("start");

//中止位置，由于先++，因此中止位置是加1

    var stopPosition = 8;

    

    var divList = [];

    var arr = [0, 1, 2, 5, 8, 7, 6, 3];

    for (let i = 0; i < divNum.length; i++) {

        divList.push(divNum[arr[i]]);

    };

    

    //样式改变

    function animation(index) {

     divList[index].style.background = 'red';

     //选中当前，上一个初始化

     if(index == 0){

      divList[7].style.background = '#fff';

     }else{

      divList[index - 1].style.background = '#fff';

     };

    }

    

    startBtn.onclick = function () {

     startBtn.innerText = "抽奖中...";

     var roundNum = 0;//转了多少个以后中止，能够当作除以8以后的圈

     var currentIndex = 0;//当前选中

     speedFun(500);

     

      function speedFun(speed) {

       //当转动数量没有达到50个一直加速直到100，当数量到达减速

       if(roundNum != 50){

        //速度从500到慢，一直到100最快

        if(speed != 100){

         speed -= 50;

        };

        roundNum ++;

       }else{

        //速度从快到慢，直到500

        if(speed != 500){

         speed += 50;

        }else{

         //速度达到500，若是设置选中位置跟当前选中相同就中止

         if(currentIndex == stopPosition){

          stopLuck();

          return

         }

        }

       };

       //数组只有0-7，第八个的时候置0

       currentIndex = currentIndex > 7 ? 0 : currentIndex;

       animation(currentIndex);

       currentIndex ++;

       //用定时器控制速度，另外一种思路也能够用计时器

       setTimeout(function () {

        speedFun(speed);

       }, speed)

      }

    }

    //中止以后要中奖仍是不中奖函数

    function stopLuck() {

     startBtn.innerText = "抽奖";

    }

</script>

</body>

</html>

复制代码

这是很简单的一个demo，看看代码估计就会了，可是但愿能够改为本身的代码。ui

1. 九宫格抽奖
2. JS九宫格抽奖
3. Android 九宫格抽奖
4. jq九宫格抽奖
5. 抽奖九宫格Demo
6. JS笔记：实现九宫格抽奖
7. jquery——九宫格大转盘抽奖
8. 【javascript】九宫格抽奖组件设计
9. vue抽奖组件之九宫格
10. JavaScript实现基本九宫格抽奖
更多相关文章...
• jQuery Mobile 表格 - jQuery Mobile 教程
• ionic 网格(Grid) - ionic 教程
• RxJava操作符（九）Connectable Observable Operators
• IntelliJ IDEA代码格式化设置