_javascript technique of digital clock instance with JavaScript realizing scrolling effect

There are many examples of how JavaScript can realize digital clock effect on the Internet, but this article introduces the digital clock of scrolling effect. Small series think the effect is very dazzle, share below to everybody.

Let's take a look at the cool effect.

The following is a code instance

JavaScript code section:

Window.onload=function () {
function Todou (n) {return
n<10? 0 "+n:" "+n"
;
var oimg=document.getelementsbytagname ("img");
SetInterval (clock,1000);
Clock ()
function Clock () {
var odate=new Date ();
var oh=odate.gethours ();
var of=odate.getminutes ();
var om=odate.getseconds ();
var Str=todou (OH) +todou (OF) +todou (OM);
for (Var i=0;i<oimg.length;i++) {Move
(oimg[i],{"margintop": -35*str.charat (i)});}}

DIV+CSS Layout section:

<ul>
<li></li>
<li> </li>
<li>:</li>
<li> </li> <li></li>
<li>:</li>
<li></li>
<li> </li>
</ul>
*{padding:0; margin:0; list-style:none;}
ul{width:200px; margin:100px Auto;
li{float:left; height:35px; overflow:hidden; line-height:35px;}

Summarize

The above is about using JavaScript to achieve scrolling effect of the digital clock All instance code, the code is very simple but the effect is very good, hope to help you need.