Case sharing demo of carousel lottery (with code)

工作之余，总想找出点事干，所以就想试试看自己能否写个圆盘抽奖的demo。
开发思路

• 布局 css rotate 布局；

• 抽奖过渡效果，采用css3 transition；

• 动态计算抽奖结束时的角度，赋值给待选择的元素。

效果图

代码

    <p class="rotate tn">
        <!-- 外部圆-->
        <p class="out-circle">
            <p class="p1">1</p>
            <p class="p2">2</p>
            <p class="p3">3</p>
        </p>
         <!--内部园-->
        <p class="inner-circle">
            <p class="p11">a</p>
            <p class="p12">b</p>
            <p class="p13">c</p>
            <p class="p14">d</p>
            <p class="p15">e</p>
            <p class="p16">f</p>
        </p>
    </p>
    <p class="start-game">
        <label for="num">
            <input 
                   type="text" 
                   id="num" name="num"
                   placeholder="请输入外数字(0-2)）"
                   />
        </label>
        <a href="javascript:void(0);">开始</a>
    </p>

        * {
            margin: 0;
        }
        .rotate {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 400px;
            text-align: center;
            color: #fff;
            font-size: 50px;
            border-radius: 50%;
            background: antiquewhite;
        }
        .tn {
            transition: all 3s cubic-bezier(.11,.77,.2,.94);
            transform-origin: 50% 50%;
        }
        .out-circle {
            position: absolute;
            width: 300px;
            height: 300px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /*基础旋转的圆*/
        .out-circle  p {
            position: absolute;
            display: block;
            margin: 0 auto;
            left: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: red;
            /*以自己的宽度的一半 为 x，以父盒子的高度一半 为 y， 作为旋转点。*/
            transform-origin: 15px 150px;
            border-radius: 50%;
            font-size: 16px;
        }
        .inner-circle {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /*基础旋转的圆*/
        .inner-circle p {
            position: absolute;
            display: block;
            margin: 0 auto;
            left: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: #4eff00;
            transform-origin: 15px 100px;
            border-radius: 50%;
            font-size: 16px;
        }
        .p11 {
            transform: rotate(0deg);
        }
        .p12 {
            transform: rotate(60deg);
        }
        .p13 {
            transform: rotate(120deg);
        }
        .p14 {
            transform: rotate(180deg);
        }
        .p15 {
            transform: rotate(240deg);
        }
        .p16 {
            transform: rotate(300deg);
        }
        .p1 {
            transform: rotate(0deg);
        }
        .p2 {
            transform: rotate(120deg);
        }
        .p3 {

            transform: rotate(240deg);
        }
        a {
           padding: 2.5px 10px;
           background: #0ebeff;
           border-radius: 5px;
           color: #fff;
           text-decoration: none;
        }
     .start-game {
      position:absolute;
      top: 20px;
      left: 20px;
    }

        (function () {
            let deg = 0;
            // 基础角度
            let baseDeg = 120;
            let $input = $('#num');
            // 多少个旋转点
            let blocks = 360 / baseDeg;
            let k = null;
            let flag =  false;
            const $rotate = $('.rotate');
            // 0 1 2
            $('a').on('click', function () {
                var num = $input.val();
                // 当前旋转 位置
                var curLc = deg % 360 / 120;
                // 待旋转的角度
                deg = deg + 4 * 360 + (2*blocks  - num - curLc) * baseDeg;
                if (flag === true) {
                    return false;
                }
                flag = true;
                clearInterval(k);
                k = null;
                $rotate.addClass('tn');
                $rotate.css({
                    'transform': `rotate(${deg}deg)`
                });
                // 监听过渡结束效果！--没加入兼容性
                $rotate.on('transitionend', function () {
                    flag = false;
                    $(this).removeClass('tn');
                    let timeK = null;
                    // 抽奖后 圆盘动旋转
                    setTimeout(() => {
                        k = timeK = setInterval( () => {
                            var temDeg = deg.toString();
                            if (k !== timeK) {
                                clearInterval(timeK);
                                return false;
                            }
                            if ($rotate.hasClass('tn')) {
                                return false;
                            }
                            // 一下代码 正则是为了解决 js 小数点 计算 问题。
                            temDeg = (/\./).test(temDeg) ? temDeg.replace(/\.\d+/, function ($1) {
                                var result = $1.length === 2 ? `${$1.substr(1)}0`: `${$1.substr(1)}`;
                                return result
                            }) : `${temDeg}00`;
                            temDeg = parseInt(temDeg);
                            temDeg += 5;
                            temDeg = temDeg.toString().split('');
                            temDeg.splice(temDeg.length - 2, 0, '.');
                            temDeg = temDeg.join('');
                            deg = parseFloat(temDeg);
                            $(this).css({
                                'transform': `rotate(${deg}deg)`
                            });
                        }, 13)
                    }, 1000);

                });
            })
        })()

相关文章：

PHP转盘抽奖接口实例，php转盘抽奖

手机端转盘抽奖代码分享

The above is the detailed content of Case sharing demo of carousel lottery (with code). For more information, please follow other related articles on the PHP Chinese website!