1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Petite horloge

Signaler
Messages postés
6
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 février 2010
 -
Messages postés
29
Date d'inscription
mercredi 10 février 2010
Statut
Membre
Dernière intervention
22 septembre 2011
 -
bonjour ,je suis nouvelle sur le site et pas très ferue en informatique, voilà mon problème : je viens de creer un blog et voudrais mettre le gadget : la petite horloge qui suis le curseur si quelqu'un pouvait me venir en aide je le remercie d'avance
cordialement
Afficher la suite

8 réponses

Réponse 1 / 8
Messages postés
29
Date d'inscription
mercredi 10 février 2010
Statut
Membre
Dernière intervention
22 septembre 2011
slt moi je connait ca comme script avec date qui tourne autour de l'horloge: 
<script type="text/javascript">
<!--
dCol='#FF0033';//date colour.
fCol='0000FF';//face colour.
sCol='F00000';//seconds colour.
mCol='F00000';//minutes colour.
hCol='F00000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new Array("DIMANCHE","LUNDI","MARDI","MERCREDI","JEUDI","VENDREDI","SAMEDI");
m=new Array("JANVIER","FEVRIER","MARS","AVRIL","MAI","JUIN","JUILLET","AOUT","SEPTEMBRE","OCTOBRE","NOVEMBRE","DECEMBRE");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="";
props2="";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.03;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'<\/font><\/center><\/layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'<\/font><\/center><\/layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><center>'+S[i]+'<\/b><\/center><\/font><\/layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><center>'+M[i]+'<\/b><\/center><\/font><\/layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><center>'+H[i]+'<\/b><\/center><\/font><\/layer>');
}
if (ie){
document.write('

');
for (i=0; i < D.length; i++)
document.write('
'+props2+D[i]+'<\/B><\/font><\/div>');
document.write('<\/div><\/div>');
document.write('

');
for (i=0; i < n; i++)
document.write('
'+props+Face[i]+'<\/B><\/font><\/div>');
document.write('<\/div><\/div>');
document.write('

');
for (i=0; i < H.length; i++)
document.write('
'+H[i]+'<\/div>');
document.write('<\/div><\/div>');
document.write('

');
for (i=0; i < M.length; i++)
document.write('
'+M[i]+'<\/div>');
document.write('<\/div><\/div>')
document.write('

');
for (i=0; i < S.length; i++)
document.write('
'+S[i]+'<\/div>');
document.write('<\/div><\/div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
//-->
</script>
    <style type="text/css"> A:link {text-decoration: none ; color: #0000FF;}
 A:visited {text-decoration: none  ; color: #0000FF;}
 A:active {text-decoration: underline  ; color: #0000FF;}
 A:hover {text-decoration: underline; color: #DC0000;}
body { background-image: url('background.gif'); background-repeat: no-repeat; background-attachment: fixed }
 /* btn*/.clear { /* generic container (i.e. div) for floating buttons */ overflow: hidden; width: 100%; }
 a.button { background: transparent url('bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ }
 a.button span { background: transparent url('bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; }
 a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ }
 a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ }
 
 a.button:link {text-decoration: none ; color: #808080;}
 a.button:visited {text-decoration: none  ; color: #808080;}
 a.button:active {text-decoration: none  ; color: #A7A9A8;}
 a.button:hover {text-decoration: none; color: black;}
 /* fin btn*/
  #pscroller1{ width: 400px; height: 14px; border: 1px solid #ACACAC; padding: 8px; background-color: #FBFBFB; font-family: sans-serif; font-size: 60%; text-decoration: none; color: #000066; }

.classcroll A:link { text-decoration: underline; color: #000066;}

.classcroll A:visited { text-decoration: underline; color: #000066;}

.classcroll A:active {text-decoration: underline; color: red;}

.classcroll A:hover { text-decoration: underline; color: red;}


    </style>

<script type="text/javascript">
var pausecontent=new Array()
pausecontent[0]='02/12: Nouveau logiciel Coupe du monde 2010<\/a>... !!!'
pausecontent[1]='17/11: Réparation de Traducteur (google avait encore tout cassé)...Ici<\/a>'
pausecontent[2]='01/11: Encore une nouvelle enigme...Ici<\/a>... !!!'
pausecontent[3]='07/05: Evolution MAJEURE de Navastro<\/a>... !!!'
pausecontent[4]='28/02: Le 500 000eme visiteur est venu à 20h26... ( Champagne ! )'
pausecontent[5]='27/02: Mise a jour de Calendes V4.2!<\/a>'
pausecontent[6]='10/01: Nouveau Tables de multiplications<\/a> Pour nos CE1.'
pausecontent[7]='09/01: La page à Edouard...<\/A>'
pausecontent[8]='21/08: Encore une nouvelle page pour les astronomes: Carte du Ciel...<\/a>.'
pausecontent[9]='05/03: Le site McAfee Site Advisor<\/a> teste et valide ce site et ses 57 téléchargements.'
pausecontent[10]='09/11: Lundi 12 à 12h15 sur france bleu<\/a> Je suis interviewé sur les calendriers.'
/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('

'+content[0]+'<\/div>
'+content[1]+'<\/div><\/div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// animateup()- Move the two inner divs of the scroller up and in sync
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// swapdivs()- Swap between which is the visible and which is the hidden div
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// setmessage()- Populate the hidden div with the next message before it's visible
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>

Si ca à pu t'aider de rien
Réponse 2 / 8
Messages postés
6
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 février 2010
bonjour, oui c'est celle là, merci beaucoup, mais peux tu me donner la marche à suivre pour l'installer sur mon blog (sur blogger)?
Réponse 3 / 8
Messages postés
29
Date d'inscription
mercredi 10 février 2010
Statut
Membre
Dernière intervention
22 septembre 2011
bonjour, pour l'installer sur ton blog je sais pas trop comment faire je suis un peut débutant, moi je l'est mi dans le code source de ma page web, et ca fonctionne bien sauf avec morilla firefox il ne fonctionne pas! je sais pas pourquoi
Réponse 4 / 8
Messages postés
6
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 février 2010
merci pour ta réponse très rapide, peut être pour un blog c'est différent
car impossible : le code n'est pas accepté , je vais encore faire une tentative,
cordialement
Réponse 5 / 8
Messages postés
6
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 février 2010
bonjour j'ai réussi , merci ,bonne journée
merci à tous
Réponse 6 / 8
Messages postés
6
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 février 2010
re bonjourencore une petite requette : je voufrais changer les couleurs de l'horloge :comment proceder, et ou trouver le code des couleurs , merci d'avance
cordialement
Réponse 7 / 8
Messages postés
6
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 février 2010
rebonjour,j ai réussi à installer la fameuse petite horloge,mais il y a un hic : impossible de changer le background ,et c'est cette dernière qui bloque ? Si quelqu'un peut m'aider je remercie d'avance ,
je suis vraiemnt novice dans la création d'un blog soyez indulgent!!
Réponse 8 / 8
Messages postés
29
Date d'inscription
mercredi 10 février 2010
Statut
Membre
Dernière intervention
22 septembre 2011
bonjour pour les couleur son ici(en violet) en haut du script:

dCol='#FF0033';//date colour.
fCol='0000FF';//face colour.
sCol='F00000';//seconds colour.
mCol='F00000';//minutes colour.
hCol='F00000';//hours colour.

pour les modifier change le code écrit en violet par le code couleur de ton chois ci tu connait pas de code couleur va sur ce site http://www.code-couleur.com/, choisi ta couleur et copie le code couleur de la couleur que tu a choisi comme sur cette image en encadré: voilà j'espère avoir pu t'aider.
bonne soiré a tous
Répondre Posez votre question