Ausführliche Erklärung und Beispiele zum Erstellen eines Karussells in HTML5-HTML-Tutorial-php.cn

Ausführliche Erklärung und Beispiele zum Erstellen eines Karussells in HTML5

php中世界最好的语言

Freigeben： 2017-12-02 13:07:21

Original

7199 Leute haben es durchsucht

Der Fall, der Ihnen heute präsentiert wird, ist ein HTML5-Karussellbeispiel, das direkt als Lotterieprogramm verwendet werden kann. Das Folgende ist der Fallcode.

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>html5制作转盘游戏 </title>
         <meta name="keywords" content=" html5制作转盘游戏 " />
         <meta name="description" content=" html5制作转盘游戏 " />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/kinerLottery.css">
    <style>  
         h1{
                   width: 100%;
                   height: 3rem;
                   line-height: 3rem;
                   font-size: 1.8rem;
                   color:#c60;
                   text-align: center;
                   font-weight: bolder;
         }
 
    </style>
</head>
<body>
         <h1>KinerLotter——大转盘</h1>
    <div id="box">
        <div class="outer KinerLottery KinerLotteryContent"><img src="./imgs/lotteryContent.png"></div>
        <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
        <div class="inner KinerLotteryBtn start"></div>
    </div>
    <script src="js/zepto.min.js"></script>
    <script src="js/kinerLottery.js"></script>
    <script>
    /**
     * 根据转盘旋转角度判断获得什么奖品
     * @param deg
     * @returns {*}
     */
    var whichAward = function(deg) {
        if ((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) { //10M流量
            return "三网通流量 10M";
        } else if ((deg > 30 && deg <= 90)) { //IPhone 7
            return "iPhone7";
        } else if (deg > 90 && deg <= 150) { //30M流量
            return "三网通流量 30M";
        } else if (deg > 150 && deg <= 210) { //5元话费
            return "话费5元";
        } else if (deg > 210 && deg <= 270) { //IPad mini 4
            return "ipad mini4";
        } else if (deg > 270 && deg <= 330) { //20元话费
            return "话费20元";
        }
    }
 
    var KinerLottery = new KinerLottery({
        rotateNum: 8, //转盘转动圈数
        body: "#box", //大转盘整体的选择符或zepto对象
        direction: 0, //0为顺时针转动,1为逆时针转动
        disabledHandler: function(key) {
            switch (key) {
                case "noStart":
                    alert("活动尚未开始");
                    break;
                case "completed":
                    alert("活动已结束");
                    break;
            }
        }, //禁止抽奖时回调
        clickCallback: function() {
            //此处访问接口获取奖品
            function random() {
                return Math.floor(Math.random() * 360);
            }
            this.goKinerLottery(random());
        }, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
        KinerLotteryHandler: function(deg) {
                alert("恭喜您获得:" + whichAward(deg));
            } //抽奖结束回调
    });
    </script>
</body>
 
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Schritte zum Implementieren von HTTP-Cookies mit Js

Schritte zum Implementieren einer gepunkteten Linie mit HTML-Rahmen

Was ist die allgemeine Syntax von AJAX

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung und Beispiele zum Erstellen eines Karussells in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!