资源说明:<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<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>
[removed]
/*思路:获取坐标--数组arr
运行轨迹--获取最外圈数组 runArr
高亮显示--根据runArr的下标来更换背景色和字体颜色
速度变化--改变定时器的执行频率 setTimeIterver(function(),time)
停止点--获取随机数付给runArr,并清除定时器
加速减速 转动圈数:计数器
*/
/*定义二维数组 为了易于维护修改,长宽设为参数m,n*/
function getSide(m,n){
var arr=[m];//先声明m长度的一维
for(var i=0;i ");
// }
/*获取运动轨迹 -- 最外圈的数组*/
var runArr=[];
var tempX=0, //定义坐标
tempY=0,
direction="straight",
count=0;
while(tempX>=0 && tempX=0 && tempY ");
}*/
//定义启动函数
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>
<input value="开始" id="btn1" type="button" class="play_btn" ></p>
春 | 眠 | 不 | 觉 | 晓 |
花 | 处 | |||
声 | 处 | |||
雨 | 闻 | |||
风 | 来 | 夜 | 鸟 | 啼 |
本源码包内暂不包含可直接显示的源代码文件,请下载源码包。