html刮刮卡开始刮奖页面,html5刮刮卡抽奖 示例源码

【实例简介】

【实例截图】

【核心代码】

Lottery Demo

body{

height:1000px;

}

#lotteryContainer {

position:relative;

width: 300px;

height:100px;

}

#drawPercent {

color:#F60;

}

刷新彩票已刮开 0% 区域。

window.onload = function () {

var lottery = new Lottery('lotteryContainer', '#CCC', 'color', 300, 100, drawPercent);

lottery.init('http://www.baidu.com/img/bdlogo.gif', 'image');

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;

}

总结

以上是生活随笔为你收集整理的html刮刮卡开始刮奖页面,html5刮刮卡抽奖 示例源码的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。