Javascript特效之模擬抽獎程序
我們經常會看到一些抽獎程序,應該很多都是H5做的,今天我們來看看js怎麼實現類似抽獎的程序。
效果圖:
點擊開始時,會一直跳動文本框的值直到我們點擊停止。就類似抽獎的效果。不過這個機率沒法設置。
實現思路:
我們先預設好參與抽獎的內容。再寫一個setInterval重複執行函數,讓文本框一直隨機顯示我們預設的內容。點擊停止時則清除setInterval即可。
js代碼:
var alldata = "linkweb,sharejs,csdn,google,baidu,msn,qq,cctv,microsoft,adobe" //抽獎的姓名,以,爲分隔
var alldataarr = alldata.split(",")
var num = alldataarr.length-1
var timer
function change(){
document.getElementById("oknum").value = alldataarr[GetRnd(0,num)];
}
function start(){
clearInterval(timer);
timer = setInterval('change()',50); //50(毫秒)爲變換間隔,越小變換的越快
}
function ok(){
clearInterval(timer);
}
function GetRnd(min,max){
return parseInt(Math.random()*(max-min+1));
}