Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Ceas personalizat


Navigare :: Javascript/Jquery
AutorMesaj
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Ceas personalizat Mar 8 Dec 2009 - 5:52
Stiu ca te-ai saturat de ceasurile flash de pe net ce contin link de redirectionare catre site-ul de unde l-ai luat. Stiu ca uneori ai dorinta de a edita designul asa cum tu doresti, insa se pare ca nu prea ai reusit nimic din toate astea.
Dar daca ti-as spune ca acest lucru este acum posibil, editarea dupa bunul plac, designul tu ti-l faci, adio flash si reclama la alte site-uri, oare mai crede ? Ar fi bine sa crezi.

Daca ai sa citesti si ai sa acorzi atentie la ce am scris mai jos vei putea realiza si tu un ceas de pus pe site, blog sau forum.

Uite aici am un exemplu pentru tine sa intelegi la ce ma refer click pe mica lupa: .

Bun, acum hai sa incepem.


Pentru inceput ai nevoie de 13 imagini, aceste imagini sunt numerele de la ceas, cele doua puncte ce despart orele de minute si minutele de secunde si imaginile ce indica ameaza si dupa-ameaza. Nu conteaza cum le denumesti, dar ca-sa nu te incurci ar fi bine sa le denumesti in felul urator:

Uite un exemplu mai jos, deasupra este denumirea iar jos imaginea.

Denumirec0c1c2c3c4c5c6c7c8c9camcpmcolon
Imagini

Poti face orice fel de numere vrei tu, orice marime, orice model, orice font insa sa fie format png cu background transparent si sa numesti imaginile c0, c1, c2 si asa mai departe.

Dupa ce ti-ai facut numerele dorite (imaginile), deschide un text document pe desktop dand click dreapta apoi new si selectezi din meniu text document
Exemplu:


Acum copie acest cod de mai jos si dai paste in acel text document
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.png", "c1.png", "c2.png", "c3.png", "c4.png", "c5.png", "c6.png", "c7.png", "c8.png", "c9.png", "cam.png", "cpm.png", "colon.png"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}

imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}

imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}

imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML

}

Dupa ce ai pus cod-ul uploadeaza imaginile facute de tine pe un site de hosting gratuit cum e: TinyPic.Com, ImageShack.Com sau orice alt site de hosting.


Iar dupa ce ai uploadat imaginile inlocuieste in cod unde scrie c0.png, c1.png, c2.png pana la colon.png cu link-ul imagini uploadate.
Mai jos ai o imagine in care este colorat in cod ce trebuie inlocuit

Dupa ce ai inlocuit imaginile cu link-ul in cod-ul pe care tu l-ai pus intr-un text doument, mergi la text document sus la File apoi la save as:

Si salveaza cu extensia .js
Exemplu:

Acum fa alt text document si copie acest cod acolo si salveaza la fel cu extensia .js

new imageclock.display()

Acum trebuie sa ai 2 documente js (javascript), intr-unul ai cod-ul lung si intr-unul cel scurt

Uplodeaza documentele js pe rand pe un site de hosting gratuit.
Poti uploada pe acest site: http://pmsc.free.fr/gb/J/upload.php
Dupa ce ai uploadat documentele trece link-ul in aceste cod-uri:
Cod:
<script type='text/javascript' src='link document 1 cod lung'></script>
si
Cod:
<script type='text/javascript' src='link document 2 cod scurt'></script>

Exemplu cum trebuiesc incolcuite:
Cod:
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152716.js'></script>
si
Cod:
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152743.js'></script>


Acum ca ai aceste 2 mici coduri
Cod:
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152716.js'></script>
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152743.js'></script>

Le pui unde doresti tu sa fie afisat ceasul.

Daca doresti o imagine de fundal sa pui la ceas, aceste 2 coduri trebuie puse intr-un tabel
Exemplu:
<table border="0" align="center">
<tr>
<td background="LINK Imagine de fundal" align='center">
cele 2 coduri aici
</td>
</tr>
</table>


Si pui acest cod cu tot cu tabel unde doresti tu, in orice pagina html, pe blog, forum, sau site


Ultima editare efectuata de catre Motanel in Lun 25 Ian 2010 - 6:22, editata de 2 ori
 Dutzulik
avatar
Rang: Membru - MT™

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Ceas personalizat Mar 8 Dec 2009 - 13:04
Frumos.....Cam lung dar frumos biggrin !
 yuye
avatar
Rang: Prieten bun

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Ceas personalizat Mier 9 Dec 2009 - 8:38
Frumos tutorialul uite ca am invatat si eu cum se faceau widget-urile alea :P
 v1sE
avatar
Rang: Membru - MT™

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Ceas personalizat Vin 11 Dec 2009 - 4:59
Frumos tutorialul mersi motanel
 Continut sponsorizat
Rang:


MesajSubiect: Re: Ceas personalizat



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu