本文介绍如何使用JavaScript实现在浏览器状态栏显示滚动文字的走马灯效果，并提供了一个表单验证示例。
第一版：浏览器状态栏显示的走马灯
<html>
<head>
<script language="javascript">
var msg="欢迎光临我的博客http://blog.youkuaiyun.com/lidengzhi0000";
var interval = 100; //速度
var spacelen = 110; //浏览器下边那个状态栏长度
var space10=" ";
var seq=0;
function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if (seq >=len ){
seq = spacelen;
window.setTimeout("Scroll2();", interval );
}
else
window.setTimeout("Scroll();", interval );
}
function Scroll2(){
var out=" ";
for(i=1;i<=spacelen/space10.length;i++)out+=space10;
out=out+msg;
len=out.length;
window.status=out.substring(seq,len);
seq++;
if( seq >= len ) { seq = 0; };
window.setTimeout("Scroll2();", interval);
}
Scroll();
</script>
</head>
<body>
</body>
</html>
............................................................................................................................................................................
第二版：浏览器状态栏显示的走马灯
<html>
<head>
<script language=JavaScript>
var MESSAGE="欢迎光临我的博客http://blog.youkuaiyun.com/lidengzhi0000";
var POSITION=100
var DELAY=5
var scroll=new statusMessageObject()
function statusMessageObject(p,d){
this.msg =MESSAGE
this.out =" "
this.pos =POSITION
this.delay=DELAY
this.i=0
this.reset=clearMessage}
function clearMessage(){
this.pos=POSITION}
function scroller(){
for (scroll.i=0;scroll.i<scroll.pos;scroll.i++){
scroll.out += " "}
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status=scroll.out
scroll.out=" "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset()}
setTimeout('scroller()',scroll.delay)}
function snapIn(jumpSpaces,position){
var msg = scroll.msg
var out = ""
for(var i=0; i<position; i++)
{out+= msg.charAt(i)}
for(i=1;i<jumpSpaces;i++)
{out += " "}
out+=msg.charAt(position)
window.status = out
if(jumpSpaces <= 1) {
position++
if(msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
}else if (jumpSpaces > 3)
{jumpSpaces *= .75}
else
{jumpSpaces--}
if(position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
}else{window.status=""
jumpSpaces=0
position=0
cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
return false }
return true}
snapIn(100,0);
</script>
</head>
<body>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------
button 的函数调用功能
<html>
<head>
<script language="JavaScript" type="text/javascript">
function checkname(){
var username = document.forms[0].fullname.value;
if (username != "li"){
alert("Sorry, " + username + ".I cannot let you proceed.");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form action="http://blog.youkuaiyun.com/lidengzhi0000" onSubmit="return checkname()">
what is your name? <br>
<input type="text" name="fullname"><br>
<input type="submit" value="Submit Form">
</form>
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
