滚动条和跑马灯
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条和跑马灯相关的知识，希望对你有一定的参考价值。
1、其他函数
obj = setInterval(‘函数名称‘, 毫秒数); clearInterval(obj); --->这就相当于一个定时器；
obj = setTimeout(‘函数名称‘, 毫秒数); clearTimeout(obj);
2、滚动条
!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>页面一</title> </head> <body> <hr/> <div style = ‘width:500px;background-color:#ddd‘> <div id = ‘process‘ style = ‘width:10%;height:10px;background-color:green;‘></div> </div> <script type = ‘text/javascript‘> /* window.prb = 10; function Foo(){ var id = document.getElementById(‘process‘); window.prb += 10; if(window.prb > 100){ clearInterval(window.interval); }else{ id.style.width = window.prb + ‘%‘; } } window.interval = setInterval(‘Foo()‘, 500); //设置定时器 */ window.prb = 10; function Foo(){ var id = document.getElementById(‘process‘); window.prb += 10; if(window.prb > 100){ clearTimeout(window.interval); }else{ id.style.width = window.prb + ‘%‘; } } window.interval = setTimeout(‘Foo()‘, 500); </script> </body> </html>
运行结果
3、跑马灯
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>欢迎上级领导来校视察 </title>
</head>
<body>
<input type = ‘button‘ value = ‘关掉‘ onclick = ‘stop();‘/>
<script type = ‘text/javascript‘>
function Go(){
var content = document.title; //DOM获得标签的内容
var firstChar = content.charAt(0);
var sub = content.substring(1, content.length);
document.title = sub + firstChar;
}
interval = setInterval(‘Go()‘, 200);
function stop(){
clearTimeout(interval); //停止当前的程序运行。
}
</script>
</body>
</html>运行结果
4、总结
(1)、num = setInterval(‘事件函数‘， 毫秒)，这个函数(setInterval)就是一个定时器，每隔多长时间执行一次这个函数；
clearInterval(num)，就是终止执行定时器函数；
(2)、num = setTimeout(‘事件函数‘， 毫秒)，这个函数只执行一次，就不在执行；
clearTimeout(num)，终止定时器的执行；
本文出自 “11586096” 博客，请务必保留此出处http://11596096.blog.51cto.com/11586096/1865255
以上是关于滚动条和跑马灯的主要内容，如果未能解决你的问题，请参考以下文章
网页中图片跑马灯上下滚动的效果怎样可以让他跑一下停一下再跑一下,代码怎么写?