JavaScript实现跑马灯效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31749421/article/details/87188313

本文主要介绍了JavaScript中实现跑马灯效果的两种方法：一是利用数组的pop和unshift方法；二是通过字符串切割来达到滚动显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总预览

1.跑马灯效果

法一：数组的pop和unshift

 <title>1234567</title>
</head>
<body>
  <script>
    // console.log(document.title);
    // 每隔0.5秒，让title最后一个文字放到title最前面去。
    // 1s = 1000ms

    // 第一种方式
    setInterval(function(){
      // 让title最后一个文字放到title最前面去。
      // 使用字符数组的办法
      // 数组有： pop方法可以从数组的最后位置弹出一个元素。
      //         unshift方法可以从数组的头部添加元素。

      // 把字符串转字符数组。
      var charArray = document.title.split("");

      // 让字符数组的最后的一个元素出数组。
      var lastChar = charArray.pop();

      // 把最后的一个元素插入到数组的开头。
      charArray.unshift(lastChar);

      // 把字符数组转成字符串
      var newTitle = charArray.join("");

      document.title = newTitle;  // 把新的标题改到浏览器上去。
    }, 800); 

  </script>

法二：字符串的切割

<title>1234567</title>
</head>
<body>
  <script>
    // 实现跑马灯效果
    var intervalID = setInterval(function(){
      // 拿到当前的页面的title
      var oldTitle = document.title;

      // 拿到当前页面title的最后一个字符
      // slice方法，可以接受两个参数。
      // 第一个参数： 截取字符串起始位置。第二个参数是结束为止。
      // slice方法不影响原始的字符串，截取到结束位置的前一个元素。
      var lastChar = oldTitle.slice(oldTitle.length - 1);

      var beforeStr = oldTitle.slice(0, oldTitle.length - 1);
      document.title = lastChar + beforeStr;
    }, 500);

    // 5秒钟之后，执行清除时钟的代码
    setTimeout(function(){
      clearInterval(intervalID);
    }, 5000);
  </script>