JavaScript 实现跑马灯抽奖效果
2016-11-22 13:52
316 查看
实现效果如图：
代码如下：<!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长度的二维
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>
代码如下：<!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长度的二维
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript实现的抽奖效果【数字跳动版】
- JavaScript 抽奖效果实现代码 数字跳动版
- javascript实现跑马灯悬停放大效果
- javascript+canvas实现刮刮卡抽奖效果
- 用js实现跑马灯抽奖效果
- JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
- JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
- JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
- JavaScript实现跑马灯效果
- JavaScript 实现打字效果,跑马灯效果
- JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
- Javascript实现跑马灯效果的简单实例
- 原生js实现跑马灯抽奖效果
- Javascript实现跑马灯效果
- 微信小程序源码大集004---小程序实现大转盘 仿天猫抽奖 跑马灯效果（有图有源码）
- JavaScript 抽奖效果实现代码 数字跳动版
- Javascript实现点击表格行的效果
- 类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!