JavaScript 實現跑馬燈抽獎效果
阿新 • • 發佈：2019-02-12
實現效果如圖：
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js跑馬燈抽獎效果</title>
<style type="text/css">
*{
margin: 0; padding: 0;
font-size:12px;
}
body{
background-color: #2C1914;
font-family:"宋體";
}
.abs{
position:absolute;
}
.rel{
position:relative;
}
.wrap{
min-height:1000px;
}
.main{
height:718px;
}
.con980{
width:980px;
margin:0 auto;
}
.header{
width:100%; height:50px;
}
.play{
background:url() no-repeat;
width:980px; height:625px;
padding:22px 0 0 21px;
}
td{ width:187px;
height:115px;
font-family:"微軟雅黑";
background-color:#666;
text-align:center;
line-height:115px;
font-size:80px; }
.playcurr{
background-color:#F60;
color: #FFFFFF;
}
.playnormal{
background-color:#666;
}
.play_btn{ width:480px; height:115px;
display:block;
background-color:#F60;
border:0;
cursor:pointer;
font-family:"微軟雅黑";
font-size:40px;}
.play_btn:hover{
color:#fff;
}
.btn_arr{
left:255px;
top:255px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header"></div>
<div class="main">
<div class="con980">
<div class="play rel">
<p class="btn_arr abs"><input value="點選領獎" id="btn1" type="button" onclick="start()" class="play_btn" ></p>
<table class="playtab" id="tb" cellpadding="0" cellspacing="1">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>16</td><td></td><td></td><td></td><td>6</td>
</tr>
<tr>
<td>15</td><td></td><td></td><td></td><td>7</td>
</tr>
<tr>
<td>14</td><td></td><td></td><td></td><td>8</td>
</tr>
<tr>
<td>13</td><td>12</td><td>11</td><td>10</td><td>9</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*思路：獲取座標--陣列arr
執行軌跡--獲取最外圈陣列 runArr
高亮顯示--根據runArr的下標來更換背景色和字型顏色
速度變化--改變定時器的執行頻率 setTimeIterver(function(),time)
停止點--獲取隨機數付給runArr，並清除定時器
加速減速 轉動圈數：計數器
*/
/*定義二維陣列 為了易於維護修改，長寬設為引數m，n*/
function getSide(m,n){
var arr=[m];//先宣告m長度的一維
for(var i=0;i<m;i++){
arr[i]=[n];//宣告n長度的二維
for(var j=0;j<n;j++){
arr[i][j]=i*n+j; //給陣列元素賦值
}
}
//檢測二維陣列
// for(var i=0;i<arr.length;i++){
// document.write("第"+i+"行: "+arr[i]+"<br/>");
// }
/*獲取運動軌跡 -- 最外圈的陣列*/
var runArr=[];
var tempX=0, //定義座標
tempY=0,
direction="straight",
count=0;
while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n){//迴圈條件 tempX tempY在 n和m的長度範圍內
count++;
runArr.push([tempY,tempX]);
if(direction=="straight"){//亮塊直行的規律
if(tempX==n-1){
tempY++;
}
else{
tempX++;
}
if(tempX==n-1&&tempY==m-1){//亮塊處於拐點
direction="turn"; //改變條件 執行下面程式碼
}
}
else{
if(tempX==0){//亮塊直行的規律
tempY--;
}
else{
tempX--;
}
if(tempX==0 && tempY==0){
break;
}
}
}
return runArr;
}
var stopNum,//停止數
index=0,//當前亮區位置
prevIndex, //前一位置
speed=300,//初始速度
timer,//定時器物件
downIndex=0, //決定在哪一格變慢
cycle=0, //轉動圈數
EndCycle=0, //設定轉幾圈後再減速
flag=false, //結束轉動標誌 為true時停止
speedUp=0; //加速
tb = document.getElementById("tb"), //獲取tb物件
btn = document.getElementById("btn1"),//獲取按鈕物件
runArr=[];
runArr=getSide(5,5);//初始化陣列
/* for(var i=0;i<runArr.length;i++){
document.write(runArr[i]+"<br/>");
}*/
//定義啟動函式
function start(){
btn.disabled = true;
stopNum = Math.floor(Math.random() * 16);//點選產生隨機數，最後將停在次數上
downIndex=Math.floor(Math.random() * 16);
EndCycle=1;
clearInterval(timer);
cycle=0;
flag=false;//結束轉動標誌
timer=setInterval(run,speed);//啟動定時器
}
//執行函式
function run(){
change();//背景變化函式
//跑馬燈加速
if(flag==false){
if(speedUp==5){ //走5格後加速
clearInterval(timer); //先清除定時器，再改變速度
speed=50;
timer=setInterval(run,speed);
}
}
//跑N圈後減速
if(cycle==EndCycle+1 && index==downIndex){
clearInterval(timer);
speed=300;
flag=true; //觸發結束
timer=setInterval(run,speed);//減速
}
//計算轉了幾圈
if(index>=runArr.length){
index=0;
cycle++;
}
//停止並選中號碼
if(flag==true && index==stopNum){
speedUp=0;
clearInterval(timer);
btn.disabled = false;
}
}
//單元格背景變亮
function change(){
tb.rows[runArr[index][0]].cells[runArr[index][1]].className="playcurr"; //給當前單元格新增樣式，換高亮的背景色；
if(index>0){
prevIndex=index-1;//前一位置
}
else{
prevIndex=runArr.length-1;
}
tb.rows[runArr[prevIndex][0]].cells[runArr[prevIndex][1]].className="playnormal";//游標走過後恢復背景色；
index++;
speedUp++;
}
</script>
</body>
</html>