简单使用js实现跑马灯效果

原创 阁主  2019-03-26 20:55:01  阅读 526 次 评论 16 条
摘要:

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

演示效果:

GIF.gif

代码如下:

<!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
版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处!
免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。

发表评论


表情

评论列表

  1. boke112导航
    boke112导航  浏览器图标  系统图标 【评论达人 LV.2】  @回复

    文章那个运行代码、编辑代码的功能更赞 face_36 face_36 face_36

  2. 子午物联网
    子午物联网  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    这跑马灯跑得是真快

  3. 红嘴鸭
    红嘴鸭  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    学习了,大佬就是大佬 多谢

  4. 惠帮帮
    惠帮帮  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    超赞,多谢分享

  5. 鸟叔
    鸟叔  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    代码挺牛逼的

  6. 十三
    十三  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    挺好的 face_02

  7. 孟垂博
    孟垂博  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    文章满满的干货

  8. 文娱帝国
    文娱帝国  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    写的很好,很喜欢

  9. 头条
    头条  浏览器图标  系统图标 【评论达人 LV.1】  @回复

    文章不错非常喜欢