您的位置: 首页  >  文章  >  大转盘

大转盘

分类: 文章 • 2024-08-03 12:00:04

一、代码

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta charset="utf-8">
        <title>大转盘</title>
    </head>
    <style media="screen">
        *{ margin: 0; padding: 0 ;font-family: Arial, Helvetica, sans-serif; font-family: "微软雅黑";font-weight: normal;}
        ul,li{ list-style: none;}
        body{ background: #dedede;}
        /*转盘*/
        .wheel{margin: 100px auto; position: relative; padding: 20px; width: 400px; height: 400px; background: #d40; border-radius: 50%; box-shadow: inset 0 2px 0 2px rgba(255,255,255,.3), inset 0 -2px 0 2px rgba(0,0,0,.2), 1px 2px 2px rgba(0,0,0,.2);}
        .wheel ul {list-style: none;}
        .wheel-light li{position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; opacity: .9; -moz-animation: "lightFlicker" 2s linear 0 infinite; -webkit-animation: "lightFlicker" 2s linear 0 infinite; -o-animation: "lightFlicker" 2s linear 0 infinite; -ms-animation: "lightFlicker" 2s linear 0 infinite; animation: "lightFlicker" 2s linear 0 infinite;}
        .wheel-light li i{position: absolute; display: block; width: 10px; height: 10px; background: #fe0; border-radius: 50%; box-shadow: 0 0 8px 4px #fd0;}
        .wheel-light li i:nth-child(1){top: 10px; left: 0; right: 0; margin: 0 auto;}
        .wheel-light li i:nth-child(2){top: 0; bottom: 0; right: 10px; margin: auto 0;}
        .wheel-light li i:nth-child(3){bottom: 10px; left: 0; right: 0; margin: 0 auto;}
        .wheel-light li i:nth-child(4){top: 0; bottom: 0; left: 10px; margin: auto 0;}
        .wheel-light li:nth-child(2){-moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg);}
        .wheel-light li:nth-child(3){-moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);}
        .wheel-light li:nth-child(4){-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
        .wheel-light li:nth-child(5){-moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg);}
        .wheel-light li:nth-child(6){-moz-transform: rotate(75deg); -webkit-transform: rotate(75deg); -o-transform: rotate(75deg); -ms-transform: rotate(75deg); transform: rotate(75deg);}

        .wheel-list{ transition: all 3s ease-in-out;position: relative; z-index: 20; display: block; width: 400px; height: 400px; overflow: hidden; background: #fff; border-radius: 50%; box-shadow: 0 0 6px 2px rgba(0,0,0,.4);}
        .wheel-list:before{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ''; border-radius: 50%; box-shadow: inset 0 0 0 8px rgba(255,255,155,.5); background: rgb(255,255,255); background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 40%, rgba(255,102,0,1) 85%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(40%,rgba(255,255,255,1)), color-stop(85%,rgba(255,102,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 40%,rgba(255,102,0,1) 85%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 40%,rgba(255,102,0,1) 85%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 40%,rgba(255,102,0,1) 85%); background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(255,102,0,1) 85%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff6600',GradientType=1 );}
        .wheel-list li{position: absolute; top: 0; left: 0; width: 400px; height: 200px; -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom;}
        .wheel-list li i{position: absolute; top: 0; left: 0; margin-left: -50%; display: block; width: 100%; height: 100%; background: rgba(255,221,0,.3); content: ''; box-shadow: inset -1px 0 0 rgba(255,153,0,.7), inset 0 -1px 0 rgba(255,255,255,.4); -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom;}
        .wheel-list .thanks{position: relative; margin: 0 auto; padding-top: 20px; width: 1em; color: #900; font-size: 18px; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.4);font-weight: normal;}
        .wheel-list .prize{position: relative; margin: 0 auto; padding-top: 20px; width: 50%; overflow: hidden; text-align: center; line-height: 25px; text-shadow: 0 1px 0 rgba(255,255,255,.5);}


        .wheel-light li:nth-child(2n){opacity: .5; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s;}
        .wheel-pointer{position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 140px; height: 140px; border: 1px solid #e60; box-shadow: 0 0 2px 2px rgba(0,0,0,.1); border-radius: 50%;}
        .activity{position: relative; margin: 50px auto; padding: 0 25px 30px; width: 800px; overflow: hidden; border-bottom: 3px solid #e5e5e5; background: #fff; font: 12px/1.5 "microsoft yahei"; border-radius: 20px; box-shadow: 0 1px 6px 3px rgba(0,0,0,.1);}
        .wheel-pointer:before{position: absolute; top: -40px; left: 50%; display: block; width: 60px; height: 60px; border: 1px solid #e60; background: #fb0; content: ''; box-shadow: inset 1px 1px 0 rgba(255,255,255,.5); -moz-transform-origin: left top; -webkit-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -moz-transform: rotate(30deg) skewY(30deg); -webkit-transform: rotate(30deg) skewY(30deg); -o-transform: rotate(30deg) skewY(30deg); -ms-transform: rotate(30deg) skewY(30deg); transform: rotate(30deg) skewY(30deg);}
        .wheel-pointer:after{position: relative; display: block; width: 100%; height: 100%; background: #ffcc00; content: ''; border-radius: 50%; box-shadow: inset 1px 1px 0 rgba(255,255,255,.5); background: -moz-linear-gradient(-45deg, #ffcc00 0%, #ff8800 50%, #ffcc00 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffcc00), color-stop(50%,#ff8800), color-stop(100%,#ffcc00)); background: -webkit-linear-gradient(-45deg, #ffcc00 0%,#ff8800 50%,#ffcc00 100%); background: -o-linear-gradient(-45deg, #ffcc00 0%,#ff8800 50%,#ffcc00 100%); background: -ms-linear-gradient(-45deg, #ffcc00 0%,#ff8800 50%,#ffcc00 100%); background: linear-gradient(135deg, #ffcc00 0%,#ff8800 50%,#ffcc00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ffcc00',GradientType=1 );}

        .wheel-pointer i{position: absolute; z-index: 35; top: -36px; left: 0; right: 0; margin: 0 auto; display: block; width: 60px; height: 60px; overflow: hidden;}
        .wheel-pointer i:before{display: block; width: 100%; height: 100%; content: ''; -moz-transform-origin: left top; -webkit-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -moz-transform: translateX(50%) rotate(30deg) skewY(30deg); -webkit-transform: translateX(50%) rotate(30deg) skewY(30deg); -o-transform: translateX(50%) rotate(30deg) skewY(30deg); -ms-transform: translateX(50%) rotate(30deg) skewY(30deg); transform: translateX(50%) rotate(30deg) skewY(30deg); background: rgb(255,178,0); background: -moz-linear-gradient(40deg, rgba(255,178,0,1) 0%, rgba(255,179,0,1) 45%, rgba(254,214,86,1) 46%, rgba(255,146,0,1) 90%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,178,0,1)), color-stop(45%,rgba(255,179,0,1)), color-stop(46%,rgba(254,214,86,1)), color-stop(90%,rgba(255,146,0,1))); background: -webkit-linear-gradient(40deg, rgba(255,178,0,1) 0%,rgba(255,179,0,1) 45%,rgba(254,214,86,1) 46%,rgba(255,146,0,1) 90%); background: -o-linear-gradient(40deg, rgba(255,178,0,1) 0%,rgba(255,179,0,1) 45%,rgba(254,214,86,1) 46%,rgba(255,146,0,1) 90%); background: -ms-linear-gradient(40deg, rgba(255,178,0,1) 0%,rgba(255,179,0,1) 45%,rgba(254,214,86,1) 46%,rgba(255,146,0,1) 90%); background: linear-gradient(50deg, rgba(255,178,0,1) 0%,rgba(255,179,0,1) 45%,rgba(254,214,86,1) 46%,rgba(255,146,0,1) 90%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb200', endColorstr='#ff9200',GradientType=1 );}
        .wheel-btn{position: absolute; z-index: 40; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding: 10px; width: 100px; height: 100px;box-shadow: inset 0 1px 1px rgba(255,102,0,.4), inset 0 -1px 1px rgba(255,238,0,.4); background: -moz-linear-gradient(top, rgba(255,85,0,0.7) 0%, rgba(255,221,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,85,0,0.7)), color-stop(100%,rgba(255,221,0,1))); background: -webkit-linear-gradient(top, rgba(255,85,0,0.7) 0%,rgba(255,221,0,1) 100%); background: -o-linear-gradient(top, rgba(255,85,0,0.7) 0%,rgba(255,221,0,1) 100%); background: -ms-linear-gradient(top, rgba(255,85,0,0.7) 0%,rgba(255,221,0,1) 100%); background: linear-gradient(to bottom, rgba(255,85,0,0.7) 0%,rgba(255,221,0,1) 100%); border-radius: 60px; }
        .wheel-btn strong{padding-top: 6px; display: block; color: #fff; font-size: 18px; text-shadow: 2px 0 0 #c30, -2px 0 0 #c30, 0 2px 0 #c30, 0 -2px 0 #c30, 1px 1px 0 #c30, -1px -1px 0 #c30, -1px 1px 0 #c30, -1px -1px 0 #c30, 0 2px 6px #a30;}
        .wheel-btn a{color: #ff0;position: relative; display: table-cell; vertical-align: middle; width: 100px; height: 100px; overflow: hidden; color: #ff0; font: 700 14px/25px 'microsoft yahei'; font-size: 16px; text-align: center; text-decoration: none; border-radius: 50%; box-shadow: -1px -1px 10px rgba(255,255,255,.5), 1px 1px 3px rgba(0,0,0,.4), inset -1px -2px 0 #a30; text-shadow: 1px 0 0 #c30, -1px 0 0 #c30, 0 1px 0 #c30, 0 -1px 0 #c30, 0 0 3px #fff; background: rgb(204,51,0); background: -moz-linear-gradient(top, rgba(204,51,0,1) 0%, rgba(255,221,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,51,0,1)), color-stop(100%,rgba(255,221,0,1))); background: -webkit-linear-gradient(top, rgba(204,51,0,1) 0%,rgba(255,221,0,1) 100%); background: -o-linear-gradient(top, rgba(204,51,0,1) 0%,rgba(255,221,0,1) 100%); background: -ms-linear-gradient(top, rgba(204,51,0,1) 0%,rgba(255,221,0,1) 100%); background: linear-gradient(to bottom, rgba(204,51,0,1) 0%,rgba(255,221,0,1) 100%);}
        .wheel-btn a:after{position: absolute; bottom: 7px; right: 5px; display: block; width: 90px; height: 90px; content: ''; border-radius: 50%; opacity: .8; background: -moz-linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%); background: -webkit-gradient(linear, right bottom, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0))); background: -webkit-linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 30%); background: -o-linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 30%); background: -ms-linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 30%); background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 30%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#00ffffff',GradientType=1 );}

    </style>
    <body>

    <div class="wheel">
            <ul class="wheel-light">
                <li><i></i><i></i><i></i><i></i></li>
                <li><i></i><i></i><i></i><i></i></li>
                <li><i></i><i></i><i></i><i></i></li>
                <li><i></i><i></i><i></i><i></i></li>
                <li><i></i><i></i><i></i><i></i></li>
                <li><i></i><i></i><i></i><i></i></li>
            </ul>
            <ul id="wheel" class="wheel-list">
                <li style="transform: rotate(0deg);">
                    <i style="transform: rotate(30deg) skewY(30deg);"></i>
                    <div class="prize">
                        <h3>一等奖</h3>
                        <p>iPhone6 plus</p>
                    </div>
                </li>
                <li style="transform: rotate(60deg);">

                    <i style="transform: rotate(30deg) skewY(30deg);"></i>
                    <div class="prize">
                        <h3>再接再厉</h3>
                        <p>呜呜 没有中奖 ...</p>
                    </div>
                </li>
                <li style="transform: rotate(120deg);">

                    <i style="transform: rotate(30deg) skewY(30deg);"></i>
                    <div class="prize">
                        <h3>鼓励奖</h3>
                        <p>差一点啊</p>
                    </div>
                </li>
                <li style="transform: rotate(180deg);">
                    <i style="transform: rotate(30deg) skewY(30deg);"></i>
                    <div class="prize">
                        <h3>四等奖</h3>
                        <p>特级红富士一个</p>
                    </div>
                </li>
                <li style="transform: rotate(240deg);">
                    <i style="transform: rotate(30deg) skewY(30deg);"></i>
                    <div class="prize">
                        <h3>三等奖</h3>
                        <p>iPad mini retina</p>
                    </div>
                </li>
                <li style="transform: rotate(300deg);">
                    <i style="transform: rotate(30deg) skewY(30deg);"></i>
                    <div class="prize">
                        <h3>二等奖</h3>
                        <p>iPad Air2</p>
                    </div>
                </li>
            </ul>
            <div id="pointer" class="wheel-pointer"><i></i></div>
            <div class="wheel-btn">
                <a id="button" href="javascript:;">
                    <strong>试试手气!</strong>
                </a>
            </div>
        </div>

        <!-- 提示  str-->
        <style media="screen">
            .secenio{ width: 600px; background: #ffffff; margin: 0 auto; padding: 50px;}
            .secenio ul li strong{ width: 200px; display: inline-block; padding-left: 5px;}
            .secenio ul li span{ display: inline-block; width: 20px;}
            .secenio ul li i {font-style:normal;}
        </style>
        <div class="secenio">
            <ul>
                <li>一等奖 :<strong>iPhone6 plus </strong><span></span>总数量:<i>1</i></li>
                <li>二等奖 :<strong>iPad Air2</strong><span></span>总数量:<i>2</i></li>
                <li>三等奖 :<strong>iPad mini retina</strong><span></span>总数量:<i>3</i></li>
                <li>苹果奖 :<strong>特级红富士一个</strong><span></span>总数量:<i>4</i></li>
                <li>鼓励奖 :<strong>差点就中奖了! 再接再厉</strong><span></span>总数量:<i>5</i></li>
            </ul>
        </div>
        <!-- 提示  end-->
    </body>
</html>
<script type="text/javascript">

window.onload = function (){
    /*
    ** 抽奖概率为 总和 * 10 ; 总概率 360°
    ** 旋转最少  turn +  度数的圈数 ;
    **
    */
    var PrizeSon =  ["一等奖 : iPhone6 plus " , " 二等奖 : iPad Air2" , " 三等奖 : iPad mini retina" , " 四等奖 : 特级红富士一个" , " 鼓励奖 : 差点就中奖了!" , "  再接再厉 : 很遗憾您没有中奖 !"] ; //奖品提示
    var totalNum = 6 ; // 转盘 总数
    var trunNum = [ 1 , 2 , 3 , 4 , 5 , 6 ]; //概率奖品 编号
    var turntable = [] ; // 随机概率计算
    var isStatr = false ; //锁 专拍没有执行完的时候 不可以再次点击 ;
    var lenCloc = 0 ; //当前第几次计算叠加的度数
    var turn  = 3 ; //转盘旋转最低的圈数

    var brn = document.getElementById("button");
    var wheel = document.getElementById("wheel");

    /* 循环概率 */
    for (var i = 0; i < trunNum.length; i++) {
        for (var j = 0; j < trunNum[i]; j++) {
            turntable.push(i+1);
        }
    }

    /* 点击 开始  */
    brn.onclick = function(){
        if(!isStatr){
            isStatr = true;
            var random = Math.floor(Math.random()*turntable.length);
            //console.log(Math.floor(Math.random()*turntable.length)%6);
            operation(random);
        }else{
            return false;
        }
    }

    /*    开始 function  ran = 随机    */
    function operation( ran ) {
        lenCloc++;
        var Prize = turntable[ran]-1 , sun = turn*360 ;  //编号  // 度数  //  时间
        if(Prize>=totalNum){
            Prize = 0;
        }
        var soBuom =parseInt(Math.floor(Math.random()*60) - 30);

        /*    避免多次出现1等奖 所以要删除 下标    */
        turntable.splice(ran, 1);

        /*    旋转度数 = 上次度数+ 最小圈数 * 360 + 当前数字 * 60 +随机角度  = 最终旋转度数     */
        wheel.style.transform = "rotate("+((lenCloc*sun+Prize*60)+soBuom)+"deg)";
        //wheel.style.webkitTransform = "rotate("+((lenCloc*sun+Prize*60)+soBuom)+"deg)";

        setTimeout(function () {

            alert("您获得了奖品编号:" + PrizeSon[Prize]);
            isStatr = false;

        }, 3200);
    }
}

</script>

二、效果图

大转盘


相关推荐