JavaScript 学习笔记跑马灯

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现跑马灯效果的方法。通过定时更新浏览器状态栏显示的文字，达到文字滚动的效果。代码中包括了判断是否为汉字字符的函数，确保中文字符能正确滚动。

function ischinese(s){//判断是否为汉字
    var ret=true; 
    for(var i=0;i<s.length;i++) 
       ret=ret && (s.charCodeAt(i)>=10000); 
    return ret; 
}
var msg = "这是一个跑马灯效果的JavaScript文档";
var interval = 100;
var seq = 0;
var blankstr = "";
var len = msg.length;

function scrool(){
    
    window.status = msg.substring(0,seq+1);
    seq++;
    if( seq >= len){
        seq = 0;
        scrool2();
    }else
        window.setTimeout("scrool();",interval);
    
}
function scrool2(){
    if(ischinese(msg.substring(seq,seq+1)))
        blankstr = blankstr+"  ";
    else
        blankstr = blankstr+" ";
    var str = blankstr+msg.substring(seq,len);
    window.status = str
    seq++;
    if(seq > len){
        seq = 0;
        blankstr = "";
        scrool();
    }
    else
        window.setTimeout("scrool2();",interval);
}
scrool();