JS DOM 走马灯效果

来源：互联网发布：淘宝卖家中心联系电话编辑：程序博客网时间：2024/05/18 01:38

JS DOM 走马灯效果

目的：实现如流水灯一样的滚动效果。

涉及的内容：windows对象的两个方法
1.setInterval('方法1'，时间) 每隔一段时间执行方法1
2.clearsetinterval(Timer1) Timer1是 setInterval方法的变量，取消定时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>你好，DOM编程！</title>
<script language="javascript" type="text/javascript">
var direction;

function turnleft() {
direction = "left";
}
function turnright() {
direction = "right";
}
function scroll() {
var mytitle = document.title;
if (direction == "left") {
var firstchar = mytitle.charAt(0);
var lastchar = mytitle.substring(1, mytitle.length);
document.title = lastchar + firstchar;
}
else if (direction == "right") {
var firstchar = mytitle.substring(0, mytitle.length - 1);
var lastchar = mytitle.charAt(mytitle.length - 1);
document.title = lastchar + firstchar;
}

}
setInterval("scroll();", 1000);
</script>
</head>
<body>
<input type="button" value="向左" onclick="turnleft();" />
<input type="button" value="向右" onclick="turnright();" />
</body>

</html>

0 0