Voir l'heure

Une horloge Analogique DHTML dans une fenêtre "PopUp"

Voir l'heure Cliquez sur voir l'heure ici

Sur une 1° page que vous nommée "horloge analogique"

Copiez et collez entre les balises <body> et </body> :

<script>
/*

Popup analog clock (By BGAudioDr@aol.com)

Modified slightly/ permission granted to Dynamic Drive to feature script in archive

For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com

*/
function popupclock(){

if (document.all||document.layers)

window.open("time.htm","","width=150,height=185")

}
//uncomment below to pop up clock automatically while page loads

//popupclock()

</script> <b><font size="4"><a href="javascript:popupclock()">Voir

l'heure</a></font></b></p>

<p align="center"><strong><font face="arial" size="-2" color="#FF0000">Plus de 600 Scripts en français

sur :</font></strong><br>

<strong><font face="arial, helvetica" size="-2"><a

href="http://webplus1.citeweb.net">Web Plus 1 </a></font></strong></p>

Sur une 2° page que vous nommée "time"

1 - Copiez et collez entre les balises <head> et </head> :

<script language="javascript">

<!-- ************************************** -->

<!-- Cette partie du script est à inclure dans une 2° page appelée "time"  -->

<!-- Web Site:  http://www.endnet.com -->

<!-- ************************************** -->
var isNS=(navigator.appName=="Netscape");

var _all=(isNS)? 'outer.document.' : 'all.' ;

var _style=(isNS)? '' : '.style' ;

var cnt=new Array(), radius=6, result, now=new Date(); 

var ring1_X, ring2_X, ring3_X, ring4_X, ring5_X, ring6_X, ring1_Y, ring2_Y, ring3_Y, ring4_Y, ring5_Y, ring6_Y;

var names='hrs1hrs2hrs3hrs4min1min2min3min4min5sec1sec2sec3sec4sec5sec6';

var dow="SunMonTueWedThuFriSatSun";

var months=new Array('January','Febuary','March','April','May','June','July','August','September','October','November','December');

var timestring=''
function init(){

cnt[0]=0;

for(i=1;i<=60;i++){

cnt[i]=cnt[i-1]+((Math.PI*2)/60);

cnt[i-1]+=Math.PI/180;

}

for(num=1;num<=6;num++){

eval('ring'+num+'_X=new Array()');

eval('ring'+num+'_Y=new Array()');

for(i=1;i<=60;i++){

result=((i-15)<0)? 60+i-15 : i-15;

eval('ring'+num+'_X['+i+']='+Math.floor((num*radius*Math.cos(cnt[result]))+56));

eval('ring'+num+'_Y['+i+']='+Math.floor((num*radius*Math.sin(cnt[result]))+55));

}

eval('ring'+num+'_Y[0]=ring'+num+'_Y[60]');

eval('ring'+num+'_X[0]=ring'+num+'_X[60]');

}

runclock();

}
function runclock(){

timestring=''

now=new Date(); now.hrs=now.getHours(); now.min=now.getMinutes(); now.sec=now.getSeconds();

if (now.hrs<10) timestring+='0'+now.hrs+':'; else timestring+=now.hrs+':'

if (now.min<10) timestring+='0'+now.min+':'; else timestring+=now.min+':'

if (now.sec<10) timestring+='0'+now.sec; else timestring+=now.sec
document.digital.digital2.value=timestring

now.hrs=(now.hrs>=12)? now.hrs-12 : now.hrs;

now.hrs=Math.floor((now.hrs*5)+(now.min/12));

for(n=0;n<names.length;n+=4){

movetick(names.substr(n,4), names.substr(n+3,1), 'now.'+names.substr(n,3) );

}

setTimeout('runclock()',1000);

}
function movetick(obj,ringnum,timestep){

if(isNS){

eval(obj+'.top=ring'+ringnum+'_Y['+timestep+']');

eval(obj+'.left=ring'+ringnum+'_X['+timestep+']');

}else{

eval(obj+'.pixelTop=ring'+ringnum+'_Y['+timestep+']');

eval(obj+'.pixelLeft=ring'+ringnum+'_X['+timestep+']');

}}
//document.title=dow.substr(now.getDay()*3,3)+', '+months[now.getMonth()]+' '+now.getDate()+', '+now.getFullYear()
window.onload=init;
</script>

2 - Copiez et collez entre les balises <body> et </body> :

<body bgcolor="teal"> 

<center>

<script language="javascript">
var txt='';

txt+='<table border="0" width="117" height="117" cellspacing="0" cellpadding="0"><tr><td align="center">';

txt+=(isNS)? '<ilayer name="outer" height="117" width="117" z-index="1"><img src="face.gif">' : '<div id="outer" style="position:relative; width:117px; height:117px; z-index:1"><img src="face.gif">';

txt+=(isNS)? '<layer name="hrs1" top="-3000" left="0" bgcolor="red" width="6" height="6" z-index="19"></layer>' : '<div id="hrs1" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:red; font-size:6px; z-index:19"></div>';

txt+=(isNS)? '<layer name="hrs2" top="-3000" left="0" bgcolor="red" width="6" height="6" z-index="18"></layer>' : '<div id="hrs2" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:red; font-size:6px; z-index:18"></div>';

txt+=(isNS)? '<layer name="hrs3" top="-3000" left="0" bgcolor="red" width="6" height="6" z-index="17"></layer>' : '<div id="hrs3" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:red; font-size:6px; z-index:17"></div>';

txt+=(isNS)? '<layer name="hrs4" top="-3000" left="0" bgcolor="red" width="6" height="6" z-index="16"></layer>' : '<div id="hrs4" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:red; font-size:6px; z-index:16"></div>';

txt+=(isNS)? '<layer name="min1" top="-3000" left="0" bgcolor="blue" width="6" height="6" z-index="15"></layer>' : '<div id="min1" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:blue; font-size:6px; z-index:15"></div>';

txt+=(isNS)? '<layer name="min2" top="-3000" left="0" bgcolor="blue" width="6" height="6" z-index="14"></layer>' : '<div id="min2" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:blue; font-size:6px; z-index:14"></div>';

txt+=(isNS)? '<layer name="min3" top="-3000" left="0" bgcolor="blue" width="6" height="6" z-index="13"></layer>' : '<div id="min3" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:blue; font-size:6px; z-index:13"></div>';

txt+=(isNS)? '<layer name="min4" top="-3000" left="0" bgcolor="blue" width="6" height="6" z-index="12"></layer>' : '<div id="min4" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:blue; font-size:6px; z-index:12"></div>';

txt+=(isNS)? '<layer name="min5" top="-3000" left="0" bgcolor="blue" width="6" height="6" z-index="11"></layer>' : '<div id="min5" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:blue; font-size:6px; z-index:11"></div>';

txt+=(isNS)? '<layer name="sec1" top="-3000" left="0" bgcolor="black" width="6" height="6" z-index="10"></layer>' : '<div id="sec1" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:black; font-size:6px; z-index:10"></div>';

txt+=(isNS)? '<layer name="sec2" top="-3000" left="0" bgcolor="black" width="6" height="6" z-index="9"></layer>' : '<div id="sec2" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:black; font-size:6px; z-index:9"></div>';

txt+=(isNS)? '<layer name="sec3" top="-3000" left="0" bgcolor="black" width="6" height="6" z-index="8"></layer>' : '<div id="sec3" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:black; font-size:6px; z-index:8"></div>';

txt+=(isNS)? '<layer name="sec4" top="-3000" left="0" bgcolor="black" width="6" height="6" z-index="7"></layer>' : '<div id="sec4" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:black; font-size:6px; z-index:7"></div>';

txt+=(isNS)? '<layer name="sec5" top="-3000" left="0" bgcolor="black" width="6" height="6" z-index="6"></layer>' : '<div id="sec5" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:black; font-size:6px; z-index:6"></div>';

txt+=(isNS)? '<layer name="sec6" top="-3000" left="0" bgcolor="black" width="6" height="6" z-index="5"></layer>' : '<div id="sec6" style="position:absolute; top:-3000px; left:-3000px; width:6px; height:6px; background-color:black; font-size:6px; z-index:5"></div>';

txt+=(isNS)? '</ilayer>' : '</div>';

txt+='</td></tr></table>';
document.write(txt);
for(n=0;n<names.length;n+=4){

eval('var '+names.substr(n,4)+'=document.'+_all+names.substr(n,4)+_style);

}
</script>

<form name="digital"><input type="button" name="digital2" style="font:12px black Verdana" value="Close Win" onClick="window.close()"></form>
</center>

Enregistrez sous l'image suivante ...