Bootstrap收藏本版 1 +发表新主题

[实例] 瓜瓜乐效果实现

你有2次刮奖机会

  1. <script src="/static/minjs/hlcms.Lottery.js" type="text/javascript"></script>
  2. <button id="freshBtn">开始刮奖</button><label>已刮开 <span id="drawPercent">0%</span> 区域。</label>
  3. <div id="lotteryContainer" class="d-flex justify-content-center d-block position-relative" style="height: 120px;"><p class="text-danger">你有2次刮奖机会</p></div>
  4. <script>
  5. $(function() {
  6. var lottery = new Lottery('lotteryContainer', '#CCC', 'color', 300, 100, drawPercent);
  7. //lottery.init('毛巾一条', 'text');
  8. document.getElementById('freshBtn').onclick = function() {
  9. drawPercentNode.innerHTML = '0%';
  10. lottery.init(getRandomStr(10), 'text');
  11. }
  12. var drawPercentNode = document.getElementById('drawPercent');
  13. function drawPercent(percent) {
  14. drawPercentNode.innerHTML = percent + '%';
  15. }
  16. });
  17. function getRandomStr(len) {
  18. var text = "";
  19. var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  20. for(var i = 0; i < len; i++)
  21. text += possible.charAt(Math.floor(Math.random() * possible.length));
  22. return text;
  23. }
  24. </script>
扫描二维码,手机查看
声明:本文来源于互联网,观点仅代表作者本人,不代表hl05.,真实性请妥善甄别。