JavaScript实现跑马灯效果

最新推荐文章于 2024-11-25 09:59:14 发布

原创最新推荐文章于 2024-11-25 09:59:14 发布 · 864 阅读

3 ·

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

标签

#javascript #开发语言 #ecmascript

本文介绍了一个简单的JavaScript代码示例，通过DOM操作和定时器功能，实现一个欢迎词在网页上滚动显示的效果，让文本的第一个字符不断移动到末尾，适合前端开发者学习和实践。

一段简单的代码，实现类似公司大屏幕上“欢迎XX领导莅临指导”，在JavaScript中可以轻松实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="txt"> 恭喜杜杜的老公攒到人生第一个一百万</span>
<script type="text/javascript">
    function show() {
        //html中哦通过DOM找到文本内容
        var content = document.getElementById('txt');
        var dataString = content.innerText;
        //让文字动起来
        var firstChar = dataString[0];
        var otherChar = dataString.substring(1, dataString.length);
        var nenwString = otherChar + firstChar
        //在html中更新内容
        content.innerText = nenwString;
    }
    //定时器
    setInterval(show,1000);
</script>
</body>
</html>