简单使用js实现跑马灯效果-前端开发-阁主学习小站

摘要：

效果：每过50毫秒重复把第一个字符放到最后，达到动态跑马灯效果！

演示效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js跑马灯效果</title>
</head>
<body>
    <div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">阁主博客欢迎您的来访！</div>
    <script type="text/javascript">
        setInterval(function ()//通过定时器重复动作
        {
            var oTxt = document.getElementById('txt'); //获取标签
            var txt = oTxt.innerText; //获取标签文本内容
            // console.log(typeof txt)  页面控制台查看是string
            var first_i = txt[0]; //字符串索引取值
            var last_i = txt.slice(1,txt.length);//字符串切片
            var new_txt = last_i + first_i;//字符串拼接
            oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
        },50)
    </script>
</body>
</html>

本文地址：https://www.mainblog.cn/147.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。