这篇文章主要介绍了 js 实现网页标题栏闪烁提示效果的方法, 以实例形式分析了网上比较常见的实现方法, 并对于原理进行分析并加以改进, 最后给出了一个具体的应用实例供大家参考, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现网页标题栏闪烁提示效果的方法。分享给大家供大家参考。具体分析如下:
网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下。
公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息。具体实现代码如下:
- var newMessageRemind = {
- _step: 0,
- _title: document.title,
- _timer: null,
- //显示新消息提示
- show: function() {
- var temps = newMessageRemind._title.replace("【】", "").replace("【新消息】", "");
- newMessageRemind._timer = setTimeout(function() {
- newMessageRemind.show();
- //这里写Cookie操作
- newMessageRemind._step++;
- if (newMessageRemind._step == 3) {
- newMessageRemind._step = 1
- };
- if (newMessageRemind._step == 1) {
- document.title = "【】" + temps
- };
- if (newMessageRemind._step == 2) {
- document.title = "【新消息】" + temps
- };
- },
- 800);
- return [newMessageRemind._timer, newMessageRemind._title];
- },
- //取消新消息提示
- clear: function() {
- clearTimeout(newMessageRemind._timer);
- document.title = newMessageRemind._title;
- //这里写Cookie操作
- }
- };
是不是清新了很多呢?^_^
看了上面代码自己再进行优化一下, 不管怎样,自己能吸收学习到就好了。:)我主要是觉得他代码里面 newMessageRemind 这字段用得太多了,看起来密密麻麻的,多不舒服啊,想着换一种小清新的方式展现出来,于是乎就有了下面的代码:
调用取消新消息提示:newMessageRemind.clear();
调用显示新消息提示:newMessageRemind.show();
来源: