js 转盘抽奖

11 篇文章 0 订阅

在这里插入图片描述在这里插入图片描述在这里插入图片描述

#bg img:last-child {
   width: 650px;
   height: 600px;
   margin: 0 auto;
   background: url(turntable-bg.jpg) no-repeat;
   position: relative;
}
.explain{
   position: absolute;
   z-index: 10;
   top: 155px;
   left: 247px;
}
.explain p:first-child{
   position: absolute;
   z-index: 5;
   top: 60px;
   left: 116px;
   transition: all 4s;
}

<div id="bg"><img src="/images/pointer.png" alt="pointer"><img src="/images/turntable.png" alt="turntable"></div>

var cat = 51.4; //总共7个扇形区域,每个区域约51.4度
var num = 0; //转圈结束后停留的度数
var offOn = true; //是否正在抽奖
var rdmNew = 0;//需要度数
var rdmTwo = 0 //上一次度数
$("#bg img:first-child").click(function () {
	offOn = !offOn;
	ratating();
}
//旋转
        function ratating() {
            var rdm = 0;//随机度数
            rdmNew = rdmTwo;
            var timer = null;
            clearInterval(timer);
            timer = setInterval(function () {
                if (Math.floor(rdm / 360) < 5) {
                    rdm = Math.floor(Math.random() * 3600);
                } else {
                    rdmNew = rdm + rdmNew;  //本次需要度数=随机度数+初始度数
                    $("#bg img:last-child").css({ "transform": "rotate(" + rdmNew + "deg)" });
                    clearInterval(timer);
                    setTimeout(function () {
                        offOn = !offOn;
                        num = rdmNew % 360;
                        rdmTwo = rdmNew;
                        // var ran=Math.ceil(Math.random()*100)
                        // if(ran<55){  //通过概率判断选取数字
                        // var needNum= Math.ceil(Math.random()*5)
                        // }else if(55<ran<95){
                        // var needNum= Math.ceil(Math.random()*5+5)
                        // }else if(95<ran<100){
                        // var needNum= Math.ceil(Math.random()*5+10)
                        if (num <= cat * 1) {console.log("rdm=" + rdm + ",num=" + num + "," + "4999元"); }
                        else if (num <= cat * 2) {console.log("rdm=" + rdm + ",num=" + num + "," + "50元"); }
                        else if (num <= cat * 3) {console.log("rdm=" + rdm + ",num=" + num + "," + "10元"); }
                        else if (num <= cat * 4) {console.log("rdm=" + rdm + ",num=" + num + "," + "5元"); }
                        else if (num <= cat * 5) {console.log("rdm=" + rdm + ",num=" + num + "," + "免息服务"); }
                        else if (num <= cat * 6) {console.log("rdm=" + rdm + ",num=" + num + "," + "提交白金"); }
                        else if (num <= cat * 7) {console.log("rdm=" + rdm + ",num=" + num + "," + "未中奖"); }
                    }, 4000);
                }
            }, 30);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

℡╮荆棘鸟゛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值