这里给园友们演示的是Dom操作实现跑马灯效果，相信我们很多人都用Winform实现过跑马灯效果，其中的关键就是Tirm控件，那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码的功能。
利用Dom操作实现跑马灯有两个思路：
1、定义一个记录方向的变量，默认是left（var dir="left";），然后通过点击按钮传参改变dir的值。这里只有一个setInterval计时器方法
2、写两个setInterval方法，分别控制跑马灯的方向，但是当我们改变跑马灯的方向时要停止另一个方向setInterval计时器方法
<html>
<head>
<title>跑马灯效果!!!</title>
<script type="text/javascript" language="javascript">
var timeId="";
//默认跑马灯效果
function run(){
var title=document.title;
var firsttitle=title.charAt(0);
var remaintitle=title.substring(1,title.length);
document.title=remaintitle+firsttitle;
}
//左转，字符串拼接
function leftrun(){
var title=document.title;
var firsttitle=title.charAt(0);
var remaintitle=title.substring(1,title.length);
document.title=remaintitle+firsttitle;
}
//右转，字符串拼接
function rightrun(){
var title=document.title;
var righttitle=title.substring(title.length-1,title.length);
var remaintitle=title.substring(0,title.length-1);
document.title=righttitle+remaintitle;
}
//定义变量记录开启的计时器
var leftclearId;
var rightclearId;
//左滚方法
function leftsetInter(){
//定义变量记录当前开启的计时器ID
leftclearId=setInterval('leftrun()',500);
//清除正在运行的计时器
clearInterval(rightclearId);
}
//右滚方法
function rightsetInter(){
//定义变量记录当前开启的计时器ID
rightclearId=setInterval('rightrun()',500);
//清除正在运行的计时器
clearInterval(leftclearId);
}
</script>
</head>
<body>
<input type="button" value="跑马灯效果" onclick="timeId=setInterval('run()',500)"/>
<input type="button" value="停止" onclick="clearInterval(timeId)"/><br/><br/><br/>
<input type="button" value="向左滚动" onclick="leftsetInter()"/>
<input type="button" value="向右滚动" onclick="rightsetInter()"/>
</body>
</html>
相关文章
