js实现幸运大转盘

需求:
        用点击事件等相关知识点完成幸运大转盘,页面打开,出现九宫格蓝色色块;
        色块内分别是奖品,当点击开始按钮时,有一个灰色色块开始转动;
        点击停止按钮时,灰色按钮停在哪里,就表示所中的奖品是什么.
如下图:

html部分:

<div class="container">
        <div index_roll="1">600元优惠券</div>
        <div index_roll="2">800元优惠券</div>
        <div index_roll="3">1000元优惠券</div>
        <div index_roll="0">800元优惠券</div>
        <div index_roll="8">
            <button>开始</button>
            <button>停止</button>
        </div>
        <div index_roll="4">600元优惠券</div>
        <div index_roll="7">600元优惠券</div>
        <div index_roll="6">1000元优惠券</div>
        <div index_roll="5">800元优惠券</div>
    </div>

css部分:

* {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px auto;
            width: 500px;
            height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

        .container>div {
            width: 150px;
            height: 150px;
            background-color: skyblue;
            color: #ffffff;
            text-align: center;
            line-height: 150px;
        }

        button {
            width: 60px;
            height: 30px;
        }

js部分:

var divs = document.querySelectorAll(".container>div")
        var btns = document.querySelectorAll(".container>div>button");

        var timeId = null;
        var index = 0;
        btns[0].onclick = function () {
            clearInterval(timeId);
            timeId = setInterval(() => {
                for (var j = 0; j < divs.length; j++) {
                    divs[j].style.backgroundColor = "skyblue";
                }
                for (var i = 0; i < divs.length; i++) {
                    if (Number(divs[i].getAttribute("index_roll")) == index%8) {
                        divs[i].style.backgroundColor = "grey";
                        break;
                    }
                }
                index++;
            }, 60);
        }
        btns[1].onclick= function () {
            clearInterval(timeId)
        }

queryRotate 这个插件就可以实现这个功能 jqueryRotate: 支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p/jqueryrotate/ 下面了解下这个插件怎么使用 1 $("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度 2 3 $("触发转动元素").getRotateAngle(); //返回对象当前的角度 4 5 $("触发转动元素").stopRotare(); //停止旋转动画 6 7 $("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。 01 $("触发转动元素").rotate({   02      angle:0, //起始角度 03      animateTo:180, //结束的角度 04      duration:3000, //转动时间 05      callback:function(){}, //回调函数 06      easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件 07   }) 08 09 $("触发转动元素").rotate(45); //转动45 10 11 $("触发转动元素").getRotateAngle(); //返回对象当前的角度 12 13 $("触发转动元素").stopRotare(); //停止旋转动画 14 15 另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。 大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例 一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内 二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内 三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内 下面以一个简单demo为例子 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <script type="text/javascript" src="jquery-1.8.0.min.js"></script> 06 <script type="text/javascript" src="jQueryRotate.2.2.js"></script> 07 <script type="text/javascript" src="jquery.easing.min.js"></script> 08 <script type="text/javascript" src="zp.js"></script> 09 <style type="text/css"> 10 body { 11 background: url(bg.png) 0 0 repeat; 12 } 13 14 .rotate-content { 15 width: 270px; 16 position: relative; 17 height: 270px; 18 background: url(activity-lottery-bg.png) 19 no-repeat 0 0; 20 background-size: 100% 100%; 21 margin: 0 auto 22 } 23 24 .rotate-con-pan { 25 background: url(disk.jpg) 26 no-repeat 0 0; 27 backgr
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值