jquery.rotate.js實現可選抽獎次數和中獎內容的轉盤抽獎代碼

番茄西紅柿發布于2019-04-23 11:43 / 1427人閱讀

摘要：需求抽獎代碼最多可以抽獎次，而且，每次只會中元理財金或者謝謝參與，其它的不會抽中哈哈，果然都是套路。

需求：

抽獎代碼最多可以抽獎5次，而且，每次只會中“2000元理財金”或者“謝謝參與”，其它的不會抽中（哈哈，果然都是套路）。

效果如下：

一、頁面結構：

1 2 3 4 5 6 7 8 9 10 11 12

"g-content">
  "g-lottery-case">
    "g-left">
      您已擁有"playnum">次抽獎機會，點擊立刻抽獎！~
      "g-lottery-box">
        "g-lottery-img">
        
        "playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開始抽獎">

標簽h2為提示內容，.playnum是剩余抽獎次數，.g-lottery-img是最外層的閃燈，.g-lottery-img是轉動的內容，.playbtn是點擊抽獎按鈕。

這里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很簡單的，沒幾個AIP。

二、簡單的樣式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

樣式就定一下高度，居中一下，顯示一下背景圖片

三、JS代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

說到底就是用一個1~6的隨機數，然后把對應的角度值傳給jquery.rotate.js,它就會轉到相應的地方，最后做一下對應剩余次數的判斷和修改。

最后所有代碼為：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137

"utf-8" />
  抽獎
  "keywords" content="">
  "description" content="">
  "X-UA-Compatible" content="IE=edge">
  "renderer" content="webkit">
  


"g-content">
  "g-lottery-case">
    "g-left">
      您已擁有"playnum">次抽獎機會，點擊立刻抽獎！~
      "g-lottery-box">
        "g-lottery-img">
        
        "playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開始抽獎">

所需要的圖片(這里好像上傳不了壓縮文件，所以不能整個打包上傳了)：

#復制下面的圖片名稱-鼠標移到圖片上-右鍵-圖片另存為-粘貼保存#

1.最外面的閃燈：ly-plate-c.gif

2.六個中獎內容：bg-lottery.png

3.點擊抽獎按鈕： playbtn.png

云服務器 GPU云服務器 php大轉盤抽獎代碼轉盤抽獎 php抽獎轉盤大轉盤抽獎活動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1066.html

HTML5 Canvas圓盤抽獎應用DEMO

摘要：圓盤抽獎應用頁面圓盤抽獎應用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤抽獎應用DEMO html頁面 HTML5 Canvas圓盤抽獎應用DEMO演示抱歉！瀏覽器不支持。抱歉！瀏覽器不支持。抱歉！瀏覽器...

sunsmell 2019-08-30 13:20 評論0 收藏0
HTML5 Canvas圓盤抽獎應用DEMO

摘要：圓盤抽獎應用頁面圓盤抽獎應用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤抽獎應用DEMO html頁面 HTML5 Canvas圓盤抽獎應用DEMO演示抱歉！瀏覽器不支持。抱歉！瀏覽器不支持。抱歉！瀏覽器...

anyway 2019-08-20 13:29 評論0 收藏0
HTML5 Canvas圓盤抽獎應用DEMO

摘要：圓盤抽獎應用頁面圓盤抽獎應用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤抽獎應用DEMO html頁面 HTML5 Canvas圓盤抽獎應用DEMO演示抱歉！瀏覽器不支持。抱歉！瀏覽器不支持。抱歉！瀏覽器...

dinfer 2019-08-01 16:10 評論0 收藏0
vue開發微信商城項目總結之五--vue實現九宮格抽獎

摘要：根據產品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單福幣類獎品，直接發放，可在交易明細中查看優惠劵類獎品，交易明細中根據產品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人...

CoorChice 2019-08-21 16:51 評論0 收藏0