Article Detail

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

开关 $(function(){ var timeout=true; var count=0; var titleOrigin=''; $('#shiftBtn...

HTML 阅读 59.2万 4 分钟阅读 2017-09-05 15:40

<!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>

Comments 评论区

广西南宁市 2017-09-09 10:37

网页黑客帝国代码雨滚动下落乱码代码文字背景特效动画

<style>*{padding:0px;margin:0;x}
body{background: url(https://out.img.pan.lizhenqiu.com/FhevmCp39BWLo9mBfo5MnPE6yuM0);}#matrixBG {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.8;width:100%;height:100%;
}</style>
<canvas id="matrixBG"></canvas>
	<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
<script>// JavaScript Document
$(document).ready(function(){
//var s=window.screen;
var width = matrixBG.width = window.screen.width;
var height = matrixBG.height = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx=matrixBG.getContext('2d');

var draw = function () {
  ctx.fillStyle='rgba(0,0,0,.05)';
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle='#0F0';
  ctx.font = '10pt Georgia';
  yPositions.map(function(y, index){
    text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
    x = (index * 10)+10;
    matrixBG.getContext('2d').fillText(text, x, y);
	if(y > 100 + Math.random()*1e4)
	{
	  yPositions[index]=0;
	}
	else
	{
      yPositions[index] = y + 10;
	}
  });
};
RunMatrix();
function RunMatrix()
{
	if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
			Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
	clearInterval(Game_Interval);
}
/**
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
*/
});</script>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。