【實例簡介】

【實例截圖】

【核心代碼】

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刮刮卡抽奖 示例源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。