| 标题 | 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.show(); 调用取消新消息提示：newMessageRemind.clear(); 看了上面代码自己再进行优化一下,不管怎样，自己能吸收学习到就好了。：）我主要是觉得他代码里面 newMessageRemind 这字段用得太多了，看起来密密麻麻的，多不舒服啊，想着换一种小清新的方式展现出来，于是乎就有了下面的代码： 代码如下: var newMessageRemind = function () { var i = 0, title = document.title, loop; return { show: function () { loop = setInterval(function () { i++; if ( i == 1 ) document.title = '【新消息】' + title; if ( i == 2 ) document.title = '【 】' + title; if ( i == 3 ) i = 0; }, 800); }, stop: function () { clearInterval(loop); document.title = title; } }; } (); 是不是清新了很多呢？^_^ 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>放假啦！！！</title> </head> <body> <button id="test">stop</button> <script type="text/javascript"> var newMessageRemind = function () { var i = 0, title = document.title, loop; return { show: function () { loop = setInterval(function () { i++; if ( i == 1 ) document.title = '【新消息】' + title; if ( i == 2 ) document.title = '【 】' + title; if ( i == 3 ) i = 0; }, 800); }, stop: function () { clearInterval(loop); document.title = title; } }; } (); newMessageRemind.show(); document.getElementById('test').onclick = function () { newMessageRemind.stop(); }; </script> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。