js+css实现数字滚动抽奖效果代码-html代码-BFW代码库

js+css实现数字滚动抽奖效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现数字滚动抽奖效果代码，设定中奖数字组合，点击开始，数字滚动到指定数字组合。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <style id="jsbin-css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .game_wrap {
            width: 240px;
            height: 80px;
            box-sizing: content-box;
            border-radius: 15px;
            border: 20px solid #F84438;
            overflow: hidden;
            margin: 10px auto;
            box-shadow: 0px 0px 15px rgba(219, 71, 71, 0.5) inset
        }

        .game_item {
            width: 33.333%;
            height: 80px;
            float: left;
            border-left: 5px solid #F84438
        }

            .game_item:first-child {
                border-left: none
            }

            .game_item li {
                list-style: none;
                width: 100%;
                height: 80px;
                line-height: 80px;
                text-align: center;
                position: relative;
                font-size: 50px;
            }

        .startBtn {
            background: #F84438;
            border: none;
            padding: 10px 20px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="game_wrap">
        <div class="game_item">
            <ul></ul>
        </div>
        <div class="game_item">
            <ul></ul>
        </div>
        <div class="game_item">
            <ul></ul>
        </div>
    </div>
    <div style="text-align: center;">
        <button id="btn" class="startBtn" bindtap="start">开始抽奖</button>
    </div>
    <script id="jsbin-javascript">
        const LuckGame = (function (win, doc) {
            class Luck {
                constructor(obj) {
                    this.setting = {
                        len: 5,  //奖品个数
                        speed: 5000, //滚动时间
                        circle: 5, //循环几圈
                    };
                    this.extend(this.setting, obj);
                    this.$ul = doc.querySelectorAll('.game_wrap ul');
                    this.$height = doc.querySelector('.game_item').offsetHeight;
                    this.setList();
   .........完整代码请登录后点击上方下载按钮下载查看