begin process at 2012 05 29 15:39:46
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

petite horloge


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

petite horloge

mercredi 10 février 2010 à 16:25:49 | petite horloge

tatillon

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
mercredi 10 février 2010 à 21:44:02 | Re : petite horloge

tomalex1

slt moi je connait ca comme script avec date qui tourne autour de l'horloge:
Code Javascript :
<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="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
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><font face=Arial size=3 color='+sCol+'><center><b>'+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><font face=Arial size=3 color='+mCol+'><center><b>'+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><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'<\/b><\/center><\/font><\/layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'<\/B><\/font><\/div>');
document.write('<\/div><\/div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'<\/B><\/font><\/div>');
document.write('<\/div><\/div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'<\/div>');
document.write('<\/div><\/div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'<\/div>');
document.write('<\/div><\/div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+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 <a href= cdm.php >Coupe du monde 2010<\/a>... !!!'
pausecontent[1]='17/11: R&eacute;paration de Traducteur (google avait encore tout cass&eacute;)...<a href= http://olravet.fr/Divers.php#U19>Ici<\/a>'
pausecontent[2]='01/11: Encore une nouvelle enigme...<a href= http://olravet.fr/genie/dix.php >Ici<\/a>... !!!'
pausecontent[3]='07/05: Evolution MAJEURE de <a href= navastro.php#A1 >Navastro<\/a>... !!!'
pausecontent[4]='28/02: Le 500 000eme visiteur est venu &agrave; 20h26... ( Champagne ! )'
pausecontent[5]='27/02: Mise a jour de <a href= http://olravet.fr/telechargement.php#A1 >Calendes V4.2!<\/a>'
pausecontent[6]='10/01: Nouveau <a href= http://olravet.fr/Divers.php#J12 >Tables de multiplications<\/a> Pour nos CE1.'
pausecontent[7]='09/01: La page &agrave; <a href = http://olravet.fr/Edouard.php>Edouard...<\/A>'
pausecontent[8]='21/08: Encore une nouvelle page pour les astronomes: <a href= http://olravet.fr/ciel/leciel.php>Carte du Ciel...<\/a>.'
pausecontent[9]='05/03: Le site <a href= http://www.siteadvisor.com/sites/olravet.fr/summary/>McAfee Site Advisor<\/a> teste et valide ce site et ses 57 t&eacute;l&eacute;chargements.'
pausecontent[10]='09/11: Lundi 12 &agrave; 12h15 sur <a href= http://olravet.fr/telechargement.php#A1 >france bleu<\/a> Je suis interview&eacute; 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('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'<\/div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+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
jeudi 11 février 2010 à 09:37:32 | Re : petite horloge

tatillon

bonjour, oui c'est celle là, merci beaucoup, mais peux tu me donner la marche à suivre pour l'installer sur mon blog (sur blogger)?
jeudi 11 février 2010 à 13:49:13 | Re : petite horloge

tomalex1

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
jeudi 11 février 2010 à 15:05:36 | Re : petite horloge

tatillon

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
vendredi 12 février 2010 à 10:36:56 | Re : petite horloge

tatillon

bonjour j'ai réussi , merci ,bonne journée
merci à tous
samedi 13 février 2010 à 09:31:42 | Re : petite horloge

tatillon

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
vendredi 19 février 2010 à 10:06:11 | Re : petite horloge

tatillon

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!!
vendredi 19 février 2010 à 22:58:42 | Re : petite horloge

tomalex1

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 [ Lien ], 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


Cette discussion est classée dans : horloge


Répondre à ce message

Sujets en rapport avec ce message

HORLOGE À AIGUILLES QUI TOURNENT AVEC LA DATE [ par profnaimbus ] Bonjour,j'ai un problème avec le script HORLOGE À AIGUILLES QUI TOURNENT AVEC LA DATE, je n'arrive pas à le faire fonctionner pouvez vous m'aider??? horloge/calendrier [ par nlola28 ] kikou...je suis a la recherche du script pour faire des petite horloges avec des imges sur laquelle apparait la date et lheure atuel...mercinadine probleme d'affichage du script horloge/date pour la souris [ par aragorn13000 ] bonsoirm'étant enfin decidé à faire un site web je voulais mettre un script pour le curseur qui affiche l'heure et la date qui se deplace avec lui,mon horloge... facile mais ca marche pas... [ par darkthief ] Salut a tous !j'ai écrit ce code mais il ne marche pas...Pourriez vous m'aidez svp :D ? horloge function Horloge(){ var Date = créer un calendrier et une horloge [ par plumetine ] J'aimerai savoir comment peut-on créer un calendrier et une horloge avec imageet animation.Dans l'attente d'une réponse,je vous souhaite une bonne jou installation d'une horloge (aide) [ par le blogueur ] recherche personne pouvant m'aider et m'expliquer comment mettre une horloge qui suit le curseur sur un blog msn.je sais passer en mode EDIT IT ! mais pour affiché horloge qui passe dans un .js [ par lasurprise1 ] lasurprise1bonjour,j'ai un petit problème je voudrais affiché des horloges avec un fichier .js voici le fichier.js document.write('http://eclatlunaire question: horloge analogique [ par pieroazerty ] Bonjour. quelqu'un pourrait-il m'indiquer le moyen de faire avancer l'aiguille des secondes de cette horloge a aiguilles par incrément de 1 degré, en Mon horloge n'affiche que la date ? SOS [ par mani_nico ] bonjour, je ne suis + très jeune   mais faisant des créations sur le web je me suis fait un Site L'aide de votre site m'a aidée bcp à le  faire, merci Une Horloge Originale (Enfin !) [ par Phil_Free ] Salut à tous,C'est à voir ici:Un point à chaque seconde


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales