跑马灯2.txt
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文字走马灯</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" class="play_btn" ></p> <table class="playtab" id="tb" cellpadding="0" cellspacing="1"> <tr> <td>春</td><td>眠</td><td>不</td><td>觉</td><td>晓</td> </tr> <tr> <td>花</td><td></td><td></td><td></td><td>处</td> </tr> <tr> <td>声</td><td></td><td></td><td></td><td>处</td> </tr> <tr> <td>雨</td><td></td><td></td><td></td><td>闻</td> </tr> <tr> <td>风</td><td>来</td><td>夜</td><td>鸟</td><td>啼</td> </tr> </table> </div> </div> </div> </div> [removed] /*思路:获取坐标--数组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++){ // [removed]("第"+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++){ [removed](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++; } [removed] </body> </html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文字走马灯</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{
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;
剩余7页未读,继续阅读
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助