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