九宮格抽獎

時間 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代碼格式化設置

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。