JavaScript 之 走马灯

时间:2023-03-09 15:18:47
JavaScript 之 走马灯

1、原理分析:首先截取字符串的最后一位用Last表示,再截取剩余字符串用Rest表示,拼接字符串Last + Rest, 此事字符串是不会动的,还需要一个函数setInterval(javascript方法,时间),这个函数是每隔一段时间执行一些动作,执行什么动作,取决于函数中JavaScript的方法,本例中,每隔一段时间就取截取字符,然后拼接起来,因此字符串动起来。

2、简单示例

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>欢迎新同学到来</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var leftstr = title.charAt();
var rightstr = title.substring(, title.length);
document.title = rightstr + leftstr;
}
setInterval("scroll()", );
</script>
</head>
<body>
</body>
</html>

运行结果:

JavaScript 之 走马灯

3、复杂的走马灯

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎新同事到来!</title>
<script type="text/javascript">
var leftStr;
var rightStr;
var getDirection;
function strMove(direction) {
this.getDirection = direction;
var title = document.title;
getTitleStr(title);
} //拼接向左和向右的字符串
function getTitleStr(title) {
if (getDirection == "left") {
leftStr = title.charAt();
rightStr = title.substring(, title.length);
document.title = rightStr + leftStr;
} else {
leftStr = title.charAt(title.length - );
rightStr = title.substring(, title.length - );
document.title = leftStr + rightStr;
}
} //停止滚动
function stopScoll() {
if (getDirection == "left")
clearInterval(intervalLeftId);
else
clearInterval(intervalRightId);
}
</script>
</head>
<body>
<input type="button" value="向左滚动" onclick="intervalLeftId = setInterval('strMove(\'left\')',500)" />
<input type="button" value="停止滚动" onclick = "stopScoll()" />
<input type="button" value="向右滚动" onclick = "intervalRightId = setInterval('strMove(\'right\')',500)" />
</body>
</html>

运行结果:

JavaScript 之 走马灯