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)  //截取字符重新赋值给titletitleText = document.title.substring(0, titleText.length)rollingTitleText()}, 1000)},
// 清除document.title 滚动
function clearTollingTitleText(){document.title = "订单管理系统"clearTimeout(timerID)
},
window.onload=function(){rollingTitleText()}

js实现title滚动效果相关推荐

js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
JS 实现消息滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js歌词逐字滚动效果
js歌词逐字滚动效果 @Null - 滨先上效果图目录结构: 歌词文本music.txt 将酷狗歌词KRC用"酷狗歌词(krc)加解密工具"进行解密后可以得到这种歌词文本 HT ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
HTML+CSS+JS实现简单滚动效果
html代码段,需要引用"autoScroll.js"和"autoScroll.css"两个文件 <!DOCTYPE html> <html ...
js实现文字滚动效果
在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的 ...
JS实现marquee滚动效果
前言 marquee标签是微软推出的一个增强html标签动画功能的标签,也是W3C不被推荐使用的标签,因为marquee标签存在两个缺点. marquee标签的缺点 1.浏览器间存在兼容性问题(IE8 ...
js实现向上滚动效果
源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...

js实现title滚动效果

js实现title滚动效果

方式一

方式二

js实现title滚动效果相关推荐

最新文章

热门文章