站长新闻

让网页标签页头部有新消息提醒和Title标题文字滚动显示效果

文章来源：老客SEO 作者：老客SEO 人气：18 2019-07-12 10:22:42

demo展示1：

							
											01
										
											<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
									
											02
										
											<html xmlns="http://www.w3.org/1999/xhtml">
									
											03
										
											04
										
											    <head>
									
											05
										
											        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
									
											06
										
											        <title>让网页的Title标题文字滚动显示效果</title>
									
											07
										
											    </head>
									
											08
										
											09
										
											    <body bgcolor="#ffffff" onload="newtext()">
									
											10
										
											        <script language=javascript>
									
											11
										
											            var text = document.title
									
											12
										
											            var timerID
									
											13
										
											14
										
											            function newtext() {
									
											15
										
											                clearTimeout(timerID)
									
											16
										
											                document.title = text.substring(1, text.length) + text.substring(0, 1)
									
											17
										
											                text = document.title.substring(0, text.length)
									
											18
										
											                timerID = setTimeout("newtext()", 100)
									
											19
										
											            }
									
											20
										
											        </script>
									
											21
										
											    </body>
									
											22
										
											23
										
											</html>

demo展示2：

							
											01
										
											<html xmlns="http://www.w3.org/1999/xhtml">
									
											02
										
											    <head>
									
											03
										
											        <meta charset="UTF-8"/>
									
											04
										
											        <title>JS实现title标题闪烁提示信息</title>
									
											05
										
											    </head>
									
											06
										
											    <body>
									
											07
										
											        <script type="text/javascript">
									
											08
										
											            _record = 0;
									
											09
										
											            var myTitle = document.title;
									
											10
										
											11
										
											            function titleBlink() {
									
											12
										
											                _record++;
									
											13
										
											                if(_record == 3) { //当变量_record累加到3是，将其赋值为1。相当于无限循环。
									
											14
										
											                    _record = 1;
									
											15
										
											                }
									
											16
										
											                if(_record == 1) {
									
											17
										
											                    document.title = '【  】' + myTitle;
									
											18
										
											                }
									
											19
										
											                if(_record == 2) {
									
											20
										
											                    document.title = '【新消息】' + myTitle;
									
											21
										
											                }
									
											22
										
											                setTimeout("titleBlink()", 500); //调节时间，单位毫秒。
									
											23
										
											            }
									
											24
										
											            titleBlink();
									
											25
										
											        </script>
									
											26
										
											27
										
											    </body>
									
											28
										
											29
										
											</html>