js实现title滚动效果

js实现title滚动效果

原理：取第一个字符，放到尾部，定时循环操作，在视觉就有滚动效果了。直接上代码了

方式一

var titleText = "您有新订单，请及时处理！".split("")
var timerID = null
function rollingTitleText(){  
     timerID = setTimeout(() => {
       document.title = titleText.join("")
       titleText.push(titleText[0])  //方法可向数组的末尾添加一个元素，并返回新的长度 
       titleText.shift()    // 去掉数组的第一个元素  
       rollingTitleText()
     }, 1000)
 },
// 清除document.title 滚动
function clearTollingTitleText(){
    document.title = "订单管理系统"
    clearTimeout(timerID) 
},
window.onload=function(){
   rollingTitleText()
 }

方式二

var titleText = "您有新订单，请及时处理！".split("")
var timerID = null
function rollingTitleText(){  
     timerID = setTimeout(() => {
       document.title = titleText.substring(1, titleText.length) + titleText.substring(0,1)  //截取字符重新赋值给title
       titleText = document.title.substring(0, titleText.length)
       rollingTitleText()
     }, 1000)
 },
// 清除document.title 滚动
function clearTollingTitleText(){
    document.title = "订单管理系统"
    clearTimeout(timerID) 
},
window.onload=function(){
   rollingTitleText()
 }