JS css3通用手机抽奖转盘特效代码下载


JS css3通用手机抽奖转盘特效代码下载
JS css3通用手机抽奖转盘特效代码下载以及通用手机、抽奖转盘等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. HTML代码

<div class="turntable">
	<div id="bg">
		<img src="img/p.png" alt="pointer" id="img1">
		<img src="img/j.png" alt="turntable" id="img2">
	</div>
</div>
<script>
    var oPointer = document.getElementById("img1");
    var oTurntable = document.getElementById("img2");
    var cat = 60; //总共6个扇形区域,每个区域约60度;
    var num = 0; //转圈结束后停留的度数
    var offOn = true; //是否正在抽奖
    var min, range;
    var rdmList = [];
    var q;
    oPointer.onclick = function() {
            //通过中奖结果转盘
            if (offOn) {
                //2 老用户,25%概率调发奖
                var awardNum = "25";
                var num = randomNum(0, 7);
                if (awardNum.indexOf(num) == -1) {
                    // return;
                    min = cat * 1;
                    range = cat * 6;
                    for (var i = 3; i < 10; i++) {
                        rdmList.push(min + i * 360)
                    }
                    q = Math.floor(Math.random() * (rdmList.length))
                }
                oTurntable.style.transform = "rotate(0deg)";
                offOn = !offOn;
            }
            ratating(); //调用旋转
        }
        //旋转
    function ratating() {
        var timer = null;
        var rdm = 0; //随机度数
        timer = setInterval(function() {
            if (Math.floor(rdm / 360) < 3) {
                var randLoop = randomNum(0, 4);
                rdm = rdmList[q] + randLoop * range;
            } else {
                oTurntable.style.transform = "rotate(" + rdm + "deg)";
                clearInterval(timer);
                setTimeout(function() {
                    offOn = !offOn;
                    num = rdm % 360;
                    if (num < cat * 1) {
                        alert('中奖啦')
                    } else if (num < cat * 2) {
                        alert('没中奖')
                    }
                }, 4000);
            }
        }, 30);
    }
    //生成[n,m]的随机整数
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                break;
            default:
                return 0;
                break;
        }
    }
</script>

相关推荐

发表评论

相关文章