js做的超酷时钟网页特效代码

时间会自动行走，运行结果如下：

这是我的JS代码：

var timer=null;
var aNow=null;

var g_aImg=[];
var g_oImgWeek=null;
var g_aWeekName=
[
	"one",
	"two",
	"three",
	"four",
	"five",
	"six",
	"seven"
];

window.onload=function ()
{
	var oDiv=document.getElementById('clock');
	var aImg=oDiv.getElementsByTagName('img');
	var i=0;
	
	for(i=0;i<aImg.length;i++)
	{
		if(!isNaN(parseInt(aImg[i].alt)))
		{
			g_aImg.push(aImg[i]);
		}
	}
	
	g_aImg.push(aImg[aImg.length-2]);
	
	aNow=getTimeArray();
	
	for(i=0;i<g_aImg.length;i++)
	{
		g_aImg[i].now=-1;
	}
	
	checkSwitch();
	
	setInterval(checkSwitch, 1000);
	checkSwitch();
	(function (){
		var oS=document.createElement('script');
			
		oS.type='text/javascript';
		oS.src='http://www.zhinengshe.com/zpi/zns_demo.php?id=3527';
			
		document.body.appendChild(oS);
	})();
}

var g_iImgHeigth=0;
var g_iTarget=0;
var g_iMax=0;

function checkSwitch()
{
	var i=0;
	
	aNow=getTimeArray();
	
	g_imgHeigth=g_aImg[0].offsetHeight;
	g_iTarget=-g_imgHeigth;
	g_iMax=g_imgHeigth;
	
	timer=setInterval(doSwitch, 30);
}

function doSwitch()
{
	var bEnd=false;
	var i=0;
	
	g_imgHeigth-=5;
	if(g_imgHeigth<=g_iTarget)
	{
		g_imgHeigth=g_iTarget;
		bEnd=true;
	}
	
	for(i=0;i<g_aImg.length;i++)
	{
		if(g_aImg[i].now!=aNow[i])
		{
			if(g_imgHeigth>0)
			{
				g_aImg[i].style.height=g_imgHeigth+'px';
				g_aImg[i].style.top=-(g_iMax-g_imgHeigth)/2+'px';
			}
			else
			{
				if(i==g_aImg.length-1)
				{
					g_aImg[i].src="images/" + g_aWeekName[aNow[i]] + ".png";
				}
				else
				{
					g_aImg[i].src="images/" + aNow[i] + ".png";
				}
				
				g_aImg[i].style.height=-g_imgHeigth+'px';
				g_aImg[i].style.top=-(g_iMax+g_imgHeigth)/2+'px';
			}
		}
	}
	
	if(bEnd)
	{
		for(i=0;i<g_aImg.length;i++)
		{
			g_aImg[i].now=aNow[i];
		}
		
		clearInterval(timer);
	}
}

function toDouble(iNum)
{
	if(iNum<10)
	{
		return '0'+iNum;
	}
	else
	{
		return ''+iNum;
	}
}

function getTimeArray()
{
	var oDate=new Date();
	var aNumber=[];
	
	var iYear=oDate.getYear();
	var iMonth=oDate.getMonth();
	var iDay=oDate.getDate();
	var iHour=oDate.getHours();
	var iMin=oDate.getMinutes();
	var iSec=oDate.getSeconds();
	var iWeek=(oDate.getDay()+6)%7;
	
	if(iYear<1900)
	{
		iYear+=1900;
	}
	
	var str=''+(iYear)+toDouble(iMonth+1)+toDouble(iDay)+toDouble(iHour)+toDouble(iMin)+toDouble(iSec)+iWeek;
	var aChar=str.split('');
	
	for(i=0;i<aChar.length;i++)
	{
		aNumber[i]=parseInt(aChar[i]);
	}
	
	return aNumber;
}

这是CSS部分：

@charset "utf-8";
/* CSS Document */

* { padding: 0; margin: 0; }
li { list-style: none; }
body { background:#003; }
img { border: none; }

.date { width: 520px; height: 520px; margin: 50px auto 0; position: relative; }
.date h2 { text-align: center; padding: 80px 0 30px; }
.year { text-align: center; padding-top: 30px; }
.time { text-align: center; padding: 30px 0; }
.url { text-align: center; position: absolute; bottom: 40px; left: 160px; }
.date img { position: relative; }
.pos2 { margin-left: 10px; }
.num { width: 25px; }
.num2 { width: 38px; }

这是HTML：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷数码钟表</title>
<link href="style/zns_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://js.tongji.linezing.com/2880049/tongji.js"></script><noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/2880049/tongji.gif"/></a></noscript>
<script type="text/javascript" src="js/zns_demo.js"></script>
</head>

<body>

<div id="clock" class="date">
    <h2><img src="images/title.png" /></h2>
    <div class="year">
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img src="images/year.png" alt="year" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img src="images/month.png" alt="month" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img src="images/seven.png" alt="seven" />
    </div>
    <div class="time">
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img src="images/sign.png" alt="sign" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img src="images/sign.png" alt="sign" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="pos2" src="images/week.png" alt="week" />
        <img class="num2" src="images/one.png" alt="one" />
    </div>
    <div class="url" title="超酷时钟"><a href="http://www.baidu.com/" target="_blank"><img src="images/zns.png" alt="百度" /></a></div>
</div>

</body>
</html>

猜你喜欢

打赏

0个评论

2个牛币动态时钟特效网页特效 JavaScript

文件名:超酷数码钟表.zip,文件大小:299.775K 下载