Javascript特效之模擬抽獎程序

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));   
  }   

發佈了56 篇原創文章 · 獲贊 20 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章