`
wade200
  • 浏览: 3210 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

网页title标题的闪动效果

 
阅读更多

通过网页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网页特效

    三、JS实现标题闪动效果 1. 修改DOM属性:使用JavaScript,我们可以动态修改标题元素的CSS属性,例如`style.display`,来实现标题的隐藏与显示,从而达到闪动效果。 2. 定时器:JavaScript的`setInterval`函数可以...

    一个网页标题title的闪动提示效果实现思路

    实现标题闪动提示效果的基本思路是通过JavaScript中的AJAX技术与后端进行通信,获取新消息数据,然后通过改变&lt;title&gt;标签中的内容来提示用户。提示信息通常会在提示内容与空标题之间切换,通过全角空格和半角空格的...

    一个JS函数搞定网页标题(title)闪动效果

    在这篇文章中,主要介绍了使用JavaScript编写的一个函数来实现网页标题闪动效果的方法。标题中的“一个JS函数搞定网页标题闪动效果”明确指出了实现该效果只需要一个JavaScript函数,这表明了该方法的简洁性与高效性...

    JS实现消息来时让网页标题闪动效果的方法

    总的来说,要实现消息来时网页标题的闪动效果,主要涉及JavaScript的DOM操作(如 `document.title`),定时器(`setInterval` 和 `clearInterval`),以及可能的AJAX请求(用于实时数据更新)。这样的技术可以帮助...

    javascript title闪动效果

    ### JavaScript 实现网页标题栏闪动效果解析 #### 背景介绍 在网页设计中,为了提升用户体验和增加交互性,开发者们经常会利用各种视觉效果来吸引用户的注意力。其中,网页标题栏(即浏览器标签页上的标题)的动态...

    利用jquery制作闪动标题

    【利用jQuery制作闪动标题】是一种常见的网页动态效果,它能吸引用户注意力并提升网站的交互体验。在本文中,我们将深入探讨如何使用jQuery库来实现这种效果,并结合实际的代码示例进行讲解。 首先,jQuery是一个...

    JS 实现浏览器的 title 闪烁、滚动、声音提示、通知,没有依赖. 它不会干扰任何 JavaScript 库或框架

    首先,让我们关注`title`闪烁效果。在JavaScript中,可以利用`setInterval`函数定时更改页面标题,从而实现闪烁效果。例如,我们可以创建两个不同的标题,然后在一个时间间隔内交替设置它们: ```javascript let ...

    JS实现闪动的title消息提醒效果

    一个常见的做法是通过改变网页标题来实现“闪动”的提醒效果。本文将详细讲解如何使用JavaScript来实现在窗口未获得焦点或最小化时,使标题栏在“【新消息】”和空白之间交替闪烁。 首先,我们来看一下核心的...

    用javascript实现“闪动”标题栏

    在本例中,我们探讨的是如何使用JavaScript实现一个“闪动”的标题栏效果,这通常是吸引用户注意力的一种方式。 首先,我们需要了解JavaScript中的核心概念。`&lt;script&gt;`标签用于在HTML文档中插入JavaScript代码。在...

    网页制作一些常用代码

    P137和P138的例子分别展示了如何用JavaScript实现状态栏的持续显示和闪动效果。`window.status`属性用来设置状态栏的文本,`setTimeout`函数用于定时执行指定的函数,从而达到动画效果。 接下来的内容涉及到Flash ...

    网页FOUC问题导致网页混乱的解决方法

    &lt;title&gt;页面标题&lt;/title&gt; &lt;!-- 页面内容 --&gt; ``` 在上述代码中,标签的rel属性设置为"stylesheet",这表示当前页面要引用一个样式表。type属性指明内容类型为"text/css",href属性指定样式表文件的位置。 ...

Global site tag (gtag.js) - Google Analytics