`

js完成跑马灯程序

 
阅读更多
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{ font-size:12px;font-family:Arial, Helvetica, sans-serif;  text-align:center; margin:0 auto; background:url(../images/BG.jpg) repeat-y;}
table{border-collapse:collapse;border-spacing:0;}
.box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; }
.inbox{ width:751px; height:596px;position:relative;}
#random_box li{ position:absolute; width:144px; overflow:hidden; height:144px; border:3px solid #c7c5ca; background:#fff;}
#random_box li img{ width:144px; display:block; height:144px;}
.ok{ display:block; width:442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; top:149px; left:148px; cursor:pointer; text-align:center; line-height:280px;}
#random_1{ left:0; top:0;}
#random_2{ left:148px;top:0;}
#random_3{ left:296px;top:0;}
#random_4{ left:444px;top:0;}
#random_5{ left:592px;top:0; }
#random_6{ left:592px;top:148px;}
#random_7{ left:592px; top:298px;}
#random_8{ left:592px; top:446px;}
#random_9{ left:444px; top:446px;}
#random_10{ left:296px; top:446px;}
#random_11{ left:148px; top:446px;}
#random_12{ left:0; top:446px;}
#random_13{ left:0; top:298px;}
#random_14{ left:0; top:148px;}
#random_box li.random_current{border:1px solid red;}
</style>
</head>
<body>
<div class="box">
<div class="inbox">
  <ul id="random_box">
   <li id="random_1">1</li>
   <li id="random_2">2</li>
   <li id="random_3">3</li>
   <li id="random_4">4</li>
   <li id="random_5">5</li>
   <li id="random_6">6</li>
   <li id="random_7">7</li>
   <li id="random_8">8</li>
   <li id="random_9">9</li>
   <li id="random_10">10</li>
   <li id="random_11">11</li>
   <li id="random_12">12</li>
   <li id="random_13">13</li>
   <li id="random_14">14</li>
  </ul>
  <b class="ok" onClick="StartGame()">抽奖</b>
</div>
</div>
<script>
var index=1,           //当前亮区位置
prevIndex=14,          //前一位置
Speed=300,           //初始速度
Time,            //定义对象
arr_length = 14; //GetSide(5,5),         //初始化数组
EndIndex=1,           //决定在哪一格变慢
cycle=0,           //转动圈数  
EndCycle=3,           //计算圈数
flag=false,           //结束转动标志
random_num=1,      //中奖数
quick=0;           //加速
   
function StartGame(){
$("#random_box li").removeClass("random_current"); //取消选中
   //random_num = parseInt($("#txtnum").val());//
  random_num = Math.floor(Math.random()*13+2); //产出随机中奖数2--12之间
   index=1; //再来一次,从1开始
   cycle=0;
   flag=false;
   //EndIndex=Math.floor(Math.random()*12);
  
   if(random_num>5) {
  EndIndex = random_num - 5; //前5格开始变慢
   } else {
  EndIndex = random_num + 14 - 5; //前5格开始变慢
   }
  
   //EndCycle=Math.floor(Math.random()*3);
   //Star是函数,Speed是周期性执行或调用 Star函数的 之间的时间间隔,以毫秒计
   Time = setInterval(Star,Speed);
}


function Star(num){
//跑马灯变速
if(flag==false){
  //走五格开始加速
  if(quick==5){
clearInterval(Time);
Speed=50;
Time=setInterval(Star,Speed);
  }
  //跑N圈减速
  if(cycle==EndCycle+1 && index-1==EndIndex){
  clearInterval(Time);
Speed=300;
flag=true;         //触发结束
Time=setInterval(Star,Speed);
  }
}
  
if(index>arr_length){
index=1;
cycle++;
}
  
   //结束转动并选中号码
   if(flag==true && index==parseInt(random_num)){
  quick=0;
  clearInterval(Time);
   }
   $("#random_"+index).addClass('random_current'); //设置当前选中样式
   if(index>1)
   prevIndex=index-1;
   else{
   prevIndex=arr_length;
   }
   $("#random_"+prevIndex).removeClass('random_current'); //取消上次选择样式
   index++;
   quick++;
}

</script>
</body>
</html>
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 ...

    PHP程序开发范例宝典III

    实例080 状态栏中的跑马灯文字 119 实例081 在状态栏中收缩显示文字 120 实例082 在状态栏中显示数字时钟 121 3.7 弹出窗口控制 122 实例083 在首页右下角弹出渐显的广告窗口 122 实例084 浮动的广告窗口...

    java源码包---java 源码 大量 实例

     基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个目标文件 内容索引:JAVA源码,综合应用,J2me游戏,PNG,图形处理  这是个J2ME控制台程序,它能剔除PNG文件中的非关键数据段,...

    java源码包2

     基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个目标文件 内容索引:JAVA源码,综合应用,J2me游戏,PNG,图形处理  这是个J2ME控制台程序,它能剔除PNG文件中的非关键数据段...

    java源码包3

     基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个目标文件 内容索引:JAVA源码,综合应用,J2me游戏,PNG,图形处理  这是个J2ME控制台程序,它能剔除PNG文件中的非关键数据段...

    java源码包4

     基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个目标文件 内容索引:JAVA源码,综合应用,J2me游戏,PNG,图形处理  这是个J2ME控制台程序,它能剔除PNG文件中的非关键数据段...

    JAVA上百实例源码以及开源项目

     基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个目标文件 内容索引:JAVA源码,综合应用,J2me游戏,PNG,图形处理  这是个J2ME控制台程序,它能剔除PNG文件中的非关键数据段,...

    JAVA上百实例源码以及开源项目源代码

     基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个目标文件 内容索引:JAVA源码,综合应用,J2me游戏,PNG,图形处理  这是个J2ME控制台程序,它能剔除PNG文件中的非关键数据段,...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 实例217 收缩式导航菜单 274 实例218 展开式导航菜单 276 实例219 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 实例217 收缩式导航菜单 274 实例218 展开式导航菜单 276 实例219 ...

Global site tag (gtag.js) - Google Analytics