JavaScript super cool digital Clock effect code

Source: Internet
Author: User
Tags setinterval

Effect chart

Source

The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//w3c//h2d XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>JS Super cool Digital clock </title>
<link href= "Miaov_style.css" rel= "stylesheet" type= "Text/css"/>
<script type= "Text/javascript" >
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 ();
}

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;
}
</script>

<body>

<div id= "Clock" class= "date" >
<div class= "Year" >











</div>
<div class= "Time" >












</div>

</div>

</body>


Super cool digital Clock download address: http://file.111cn.net/upload/2013/10/ac.zip

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.