Browse Source

time插件迁移

tbphp 2 years ago
commit
a07f10f9c3
7 changed files with 269 additions and 0 deletions
  1. BIN
      css/bg.jpg
  2. 15 0
      css/common.css
  3. BIN
      css/time_bg.png
  4. BIN
      favicon.ico
  5. 157 0
      index.html
  6. 11 0
      js/jq.js
  7. 86 0
      js/time.js

BIN
css/bg.jpg


File diff suppressed because it is too large
+ 15 - 0
css/common.css


BIN
css/time_bg.png


BIN
favicon.ico


+ 157 - 0
index.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+<title>电子表动画DEMO-tbphp</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="zh-CN" />
+<meta name="Keywords" content="电子表动画,jquery,js动画" />
+<meta name="Description" content="电子表动画,jquery,js动画,基于jquery的计时动画效果" />
+<link rel="stylesheet" href="./css/common.css" type="text/css" />
+</head>
+<body>
+<div id="time">
+	<div id="hour1">
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+	</div>
+	<div id="hour2">
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+	</div>
+	<div id="po1">
+		<div class="potop"></div>
+		<div class="pobottom"></div>
+	</div>
+	<div id="min1">
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+	</div>
+	<div id="min2">
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+	</div>
+	<div id="po2">
+		<div class="potop"></div>
+		<div class="pobottom"></div>
+	</div>
+	<div id="sec1">
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+	</div>
+	<div id="sec2">
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+		<div class="p"></div>
+	</div>
+</div>
+<script type="text/javascript" src="./js/jq.js"></script>
+<script type="text/javascript" src="./js/time.js"></script>
+</body>
+</html>

File diff suppressed because it is too large
+ 11 - 0
js/jq.js


+ 86 - 0
js/time.js

@@ -0,0 +1,86 @@
+var size=20;//设置全局样式大小,单位方块大小
+setStyle();
+function setStyle(){
+	$('#time').css({'width':39*size,'height':7*size});
+	$('#hour1,#hour2,#min1,#min2,#sec1,#po1,#po2').css('margin-right',size);
+	$('#hour1,#hour2,#min1,#min2,#sec1,#sec2').css({'width':5*size,'height':7*size});
+	$('#po1,#po2').css({'width':size,'height':7*size});
+	$('.potop,.pobottom').css({'width':size-1,'height':size-1});
+	$('.potop').css({'top':2*size});
+	$('.pobottom').css({'bottom':size});
+	$('.p').css({'width':size-1,'height':size-1});
+}
+//自定义点动画
+$.fn.p=function(num,speed){
+	var nr=[];
+	//绘制数字0-9像素点坐标
+	nr[0]=[[1,2],[1,3],[1,4],[1,5],[1,6],[5,2],[5,3],[5,4],[5,5],[5,6],[2,1],[3,1],[4,1],[2,7],[3,7],[4,7],[2,5],[3,4],[4,3]];
+	nr[1]=[[3,1],[3,2],[3,3],[3,4],[3,5],[3,6],[3,7],[2,2],[2,7],[4,7]];
+	nr[2]=[[5,7],[4,7],[3,7],[2,7],[1,7],[1,6],[2,5],[3,4],[4,4],[1,2],[2,1],[3,1],[4,1],[5,2],[5,3]];
+	nr[3]=[[1,1],[2,1],[3,1],[4,1],[5,1],[1,6],[2,7],[3,7],[4,7],[4,2],[3,3],[4,4],[5,5],[5,6]];
+	nr[4]=[[1,5],[2,5],[3,5],[4,5],[5,5],[1,4],[2,3],[3,2],[4,1],[4,2],[4,3],[4,4],[4,6],[4,7]];
+	nr[5]=[[1,6],[2,7],[3,7],[4,7],[5,6],[5,5],[5,4],[4,3],[3,3],[2,3],[1,3],[1,2],[1,1],[2,1],[3,1],[4,1],[5,1]];
+	nr[6]=[[2,4],[3,4],[4,4],[5,5],[5,6],[4,7],[3,7],[2,7],[1,6],[1,5],[1,4],[1,3],[2,2],[3,1],[4,1]];
+	nr[7]=[[3,7],[3,6],[3,5],[3,4],[4,3],[5,2],[5,1],[4,1],[3,1],[2,1],[1,1]];
+	nr[8]=[[5,5],[5,6],[4,7],[3,7],[2,7],[1,6],[1,5],[2,4],[3,4],[4,4],[5,3],[5,2],[4,1],[3,1],[2,1],[1,2],[1,3]];
+	nr[9]=[[2,7],[3,7],[4,6],[5,5],[5,4],[5,3],[5,2],[4,1],[3,1],[2,1],[1,2],[1,3],[2,4],[3,4],[4,4]];
+	var po = nr[num].sort(function(){return Math.random()>.5 ? -1 : 1});
+	//设置动画速度
+	if(!speed)speed=2000;
+	//随机取点
+	var nn=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
+	var nm=nn.sort(function(){return Math.random()>.5 ? -1 : 1});
+	//清除多余点
+	for(var l=19;l>=po.length;l--){
+		//多使用随机数,增加动画的随机性
+		$(this).children('.p').eq(nm[l]).animate({opacity:'hide',left:Math.floor(Math.random()*10*size-Math.random()*6*size)+'px',top:Math.floor(Math.random()*10*size-Math.random()*6*size)+'px'},speed);
+	}
+	//循环显示点
+	for(var n=0;n<po.length;n++){
+		var left=(po[n][0]-1)*size;
+		var top=(po[n][1]-1)*size;
+		$(this).children('.p').eq(nm[n]).animate({opacity:'show',left:left+'px',top:top+'px'},speed);
+	}
+}
+$(function(){
+	$('.p').each(function(){
+		$(this).css('top',Math.floor(Math.random()*600-Math.random()*600));
+		$(this).css('left',Math.floor(Math.random()*500-Math.random()*500));
+	});
+	changetime(1);
+	setTimeout("run()",1000);
+});
+function run(){
+	runtime=setInterval('changetime()',1000);
+}
+var h1,h2,m1,m2,s1;
+function changetime(isStart){
+	var D=new Date();
+	//秒
+	var s=D.getSeconds();
+	var s2=s%10;
+	if(isStart==1){
+		$('#sec2').p(s2);//初始载入个位秒速度很慢
+	}else{
+		$('#sec2').p(s2,800);//循环时个们秒速度变快
+	}
+	if(Math.floor(s/10)==s1)return false;
+	s1=Math.floor(s/10);
+	$('#sec1').p(s1);
+	//分钟
+	var m=D.getMinutes();
+	if(m%10==m2)return false;
+	m2=m%10;
+	$('#min2').p(m2);
+	if(Math.floor(m/10)==m1)return false;
+	m1=Math.floor(m/10);
+	$('#min1').p(m1);
+	//小时
+	var h=D.getHours();
+	if(h%10==h2)return false;
+	h2=h%10;
+	$('#hour2').p(h2);
+	if(Math.floor(h/10)==h1)return false;
+	h1=Math.floor(h/10);
+	$('#hour1').p(h1);
+}