通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。
1 显示信息数: 2 <input type="text" id="textMsgs"/> 3 <button title="开始闪动" onclick="flashTitle('您有' + document.getElementById('textMsgs').value + '条新信息');">开始闪动</button> 4 <button title="停止闪动" onclick="stopFlash();">停止闪动</button>
1 var flashTitlePlayer = { 2 start: function (msg) { 3 this.title = document.title; 4 if (!this.action) { 5 try { 6 this.element = document.getElementsByTagName('title')[0]; 7 this.element.innerHTML = this.title; 8 this.action = function (ttl) { 9 this.element.innerHTML = ttl; 10 }; 11 } catch (e) { 12 this.action = function (ttl) { 13 document.title = ttl; 14 } 15 delete this.element; 16 } 17 this.toggleTitle = function () { 18 this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】来到博客园!'); 19 }; 20 } 21 this.messages = [msg]; 22 var n = msg.length; 23 var s = ''; 24 if (this.element) { 25 var num = msg.match(/\w/g); 26 if (num != null) { 27 var n2 = num.length; 28 n -= n2; 29 while (n2 > 0) { 30 s += " "; 31 n2--; 32 } 33 } 34 } 35 while (n > 0) { 36 s += ' '; 37 n--; 38 }; 39 this.messages.push(s); 40 this.index = 0; 41 this.timer = setInterval(function () { 42 flashTitlePlayer.toggleTitle(); 43 }, 1000); 44 }, 45 stop: function () { 46 if (this.timer) { 47 clearInterval(this.timer); 48 this.action(this.title); 49 delete this.timer; 50 delete this.messages; 51 } 52 } 53 }; 54 function flashTitle(msg) { 55 flashTitlePlayer.start(msg); 56 } 57 function stopFlash() { 58 flashTitlePlayer.stop(); 59 }
相关推荐
三、JS实现标题闪动效果 1. 修改DOM属性:使用JavaScript,我们可以动态修改标题元素的CSS属性,例如`style.display`,来实现标题的隐藏与显示,从而达到闪动效果。 2. 定时器:JavaScript的`setInterval`函数可以...
实现标题闪动提示效果的基本思路是通过JavaScript中的AJAX技术与后端进行通信,获取新消息数据,然后通过改变<title>标签中的内容来提示用户。提示信息通常会在提示内容与空标题之间切换,通过全角空格和半角空格的...
在这篇文章中,主要介绍了使用JavaScript编写的一个函数来实现网页标题闪动效果的方法。标题中的“一个JS函数搞定网页标题闪动效果”明确指出了实现该效果只需要一个JavaScript函数,这表明了该方法的简洁性与高效性...
总的来说,要实现消息来时网页标题的闪动效果,主要涉及JavaScript的DOM操作(如 `document.title`),定时器(`setInterval` 和 `clearInterval`),以及可能的AJAX请求(用于实时数据更新)。这样的技术可以帮助...
### JavaScript 实现网页标题栏闪动效果解析 #### 背景介绍 在网页设计中,为了提升用户体验和增加交互性,开发者们经常会利用各种视觉效果来吸引用户的注意力。其中,网页标题栏(即浏览器标签页上的标题)的动态...
【利用jQuery制作闪动标题】是一种常见的网页动态效果,它能吸引用户注意力并提升网站的交互体验。在本文中,我们将深入探讨如何使用jQuery库来实现这种效果,并结合实际的代码示例进行讲解。 首先,jQuery是一个...
首先,让我们关注`title`闪烁效果。在JavaScript中,可以利用`setInterval`函数定时更改页面标题,从而实现闪烁效果。例如,我们可以创建两个不同的标题,然后在一个时间间隔内交替设置它们: ```javascript let ...
一个常见的做法是通过改变网页标题来实现“闪动”的提醒效果。本文将详细讲解如何使用JavaScript来实现在窗口未获得焦点或最小化时,使标题栏在“【新消息】”和空白之间交替闪烁。 首先,我们来看一下核心的...
在本例中,我们探讨的是如何使用JavaScript实现一个“闪动”的标题栏效果,这通常是吸引用户注意力的一种方式。 首先,我们需要了解JavaScript中的核心概念。`<script>`标签用于在HTML文档中插入JavaScript代码。在...
P137和P138的例子分别展示了如何用JavaScript实现状态栏的持续显示和闪动效果。`window.status`属性用来设置状态栏的文本,`setTimeout`函数用于定时执行指定的函数,从而达到动画效果。 接下来的内容涉及到Flash ...
<title>页面标题</title> <!-- 页面内容 --> ``` 在上述代码中,标签的rel属性设置为"stylesheet",这表示当前页面要引用一个样式表。type属性指明内容类型为"text/css",href属性指定样式表文件的位置。 ...