网页标签页头部标题前面加入有新消息提醒闪烁动画效果

发布时间：2017-09-05, 15:40:27 分类：HTML | 编辑 off 网址 | 辅助

正文 1553字数 583,159阅读

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<button id='shiftBtn' type="button" name="button">开关</button>
	<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
	<script type="text/javascript">
	$(function(){
		var timeout=true;
		var count=0;
		var titleOrigin='';
		$('#shiftBtn').on('click',function(){
			if(count==0){
				titleOrigin=$('title',window.top.document).html();
				$('title',window.top.document).html('【有新提醒】'+titleOrigin);
				count++;
			}
			if(timeout){
					timeout=false;
			}else{
					timeout=true;
			}
			time();
		})
		function time()
		{
		  if(timeout) {
				$('title',window.top.document).html(titleOrigin);
				count=0;
				return;
			}
		  Method();
		  setTimeout(time,500); //time是指本身,延时递归调用自己,500为间隔调用时间,单位毫秒
		}
		function Method(){
			var titlePre=$('title',window.top.document).html().match(/\【[\s\S]*\】/)[0];
			var titleafter=$('title',window.top.document).html().replace(titlePre,'');

			if(titlePre=='【有新提醒】'){
				$('title',window.top.document).html('【&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;】'+titleafter)
			}else{
				$('title',window.top.document).html('【有新提醒】'+titleafter)
			}
		}

	})
	</script>
</body>

</html>

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

lizhenqiu blog

网页标签页头部标题前面加入有新消息提醒闪烁动画效果

相关日志

有过 1 条评论 »

留下評論