js跑马灯特效

最新推荐文章于 2025-10-07 14:35:17 发布

原创最新推荐文章于 2025-10-07 14:35:17 发布 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #跑马灯

收录于

前端专栏收录该内容

9 篇文章

订阅专栏

效果：
跑马灯

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1" style="background-color: #74086e;color: #ccdcef;font-size: 55px;text-align: center">这是一个跑马灯特效！</div>

<script type="text/javascript">
    //跑马灯特效
    setInterval(function(){
        d1 = document.getElementById('i1');  //用DOM获取标签
        d1_text = d1.innerText;  //获取标签内的文本

        first_char = d1_text[0];  //字符串索引

        sub_char = d1_text.slice(1,d1_text.length);  //字符串切片    d1_text.length获取文本长度

        new_str = sub_char + first_char;  //字符串拼接

        d1.innerText = new_str;
    },600)//每0.5秒
</script>

</body>
</html>