javascript實現的簡單抽獎程式碼

螞蟻小編發表於2017-03-16
JavaScript

關於抽獎效果在不少網站都有，有些比較華麗，本章節介紹一個比較簡單的程式碼例項，能夠滿足一定的抽獎功能，希望能夠滿足一定的需求，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#main{
  width:600px;
  height:600px;
  margin:0px auto;
  font-size:12px
}
</style>
</head>
<body>
<script type="text/javascript"> 
var prize="飛機,坦克,美女,手機,核武器";
var prizeArray = prize.split(","); 
var num = prizeArray.length-1 ; 
var timer 
function change() { 
  var qiehuan=document.getElementById("qiehuan");
  qiehuan.innerHTML=prizeArray[GetRnd(0,num)]; 
} 
function start(){ 
  clearInterval(timer); 
  timer=setInterval('change()',10); 
} 
function ok(){ 
  clearInterval(timer); 
  var showresult=document.getElementById("showresult");
  showresult.value=document.getElementById("qiehuan").innerHTML; 
} 
function GetRnd(min,max){ 
  return parseInt(Math.random()*(max-min+1)); 
} 
window.onload=function(){
  var ostart=document.getElementById("start");
  var ostop=document.getElementById("stop");
   
  ostart.onclick=function(){start()}
  ostop.onclick=function(){ok()}
}
</script>
<div id="main">
  <div id="qiehuan">請單擊開始</div>
  <input type="button" id="start" value="開始"/>
  <input type="button" id="stop"  value="結束"/>
  獎品:<input type="text" id="showresult" value="" />
</div>
</body>
</html>

相關文章