html5制作转盘游戏

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html lang="en">

 

<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=http://www.divcss5.com/html5/"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" class="box">

        <div class="outer KinerLottery KinerLotteryContent"><img src=http://www.divcss5.com/html5/"./imgs/lotteryContent.png"></div>

        <!-- 大专盘分为三种状态:活动未开始(no-start)、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态,js会根据这3class进行匹配状态 -->

        <div class="inner KinerLotteryBtn start"></div>

    </div>

    <script src=http://www.divcss5.com/html5/"js/zepto.min.js"></script>

    <script src=http://www.divcss5.com/html5/"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元话费


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1876.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • HTML5
  • lang