Web siteniz için minik analog bir saat (Javascript)

Fantoma · 31 Ekim 2012

Hazırladığınız web sitenizin içinde ufak bir analog saat barındırmak ister misiniz?
Micro Clock sayfanızın her yerine rahatlıkla yerleştirilebilir.
Form, boyut ve renkleri kolaylıkla değiştirilebilir.
Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x/6x.
ile rahatlıkla uyum sağlar.

Kod: Bu kodu web sayfanızın <body> ve </body> takıları arasında istediğiniz yere ekleyebilirsiniz.


<script>
// CREDITS:
// Micro Clock
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// set the length for each hand (pixels)
var hand_sec_length=16
var hand_min_length=14
var hand_hour_length=12

// set the color for each hand (hexadecimal values required)
var hand_sec_color="#FF0000"
var hand_min_color="#0000FF"
var hand_hour_color="#000000"

// set the weight for each hand (pixels)
var hand_sec_weight=1
var hand_min_weight=1
var hand_hour_weight=1

// set the weight of the face's outline (pixels)
var face_outlineweight=1

// set width and height for the face (pixels)
var face_width=36
var face_height=36

// set color of the face's outline
var face_outlinecolor="#000000"

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// do not edit below this line
var pi= Math.PI
var x_sec=0
var y_sec=0
var x_min=0
var y_min=0
var x_hour=0
var y_hour=0
var angle=270
var x,y

function getxy(thistime,thisradius) {
angle=6*parseInt(thistime)-90
x=Math.round((thisradius*Math.cos(angle*(pi/180)))+face_width/2)
y=Math.round((thisradius*Math.sin(angle*(pi/180)))+face_height/2)
}

function dorotate() {
var now = new Date()
var nowsec = now.getSeconds()
var nowmin = now.getMinutes()
var nowhour = now.getHours()
if (nowhour>=12) {
nowhour-=12
}
nowhour=(30*nowhour+(nowmin/2))/6
for (i=1;i<=hand_sec_length;i++) {
getxy(nowsec,i)
document.getElementById('sec'+i).style.left=x+"px"
document.getElementById('sec'+i).style.top=y+"px"
}
for (i=1;i<=hand_min_length;i++) {
getxy(nowmin,i)
document.getElementById('min'+i).style.left=x+"px"
document.getElementById('min'+i).style.top=y+"px"
}
for (i=1;i<=hand_hour_length;i++) {
getxy(nowhour,i)
document.getElementById('hour'+i).style.left=x+"px"
document.getElementById('hour'+i).style.top=y+"px"
}
var timer=setTimeout("dorotate()",1000)
}

document.write('<div id="roof" style="position:relative;width:'+(hand_hour_weight+face_width)+'px;height:'+(hand_hour_weight+face_height)+'px;top:0px;left:0px;">')
for (i=1;i<=12;i++) {
angle=30*parseInt(i)-90
x=(face_width/2*Math.cos(angle*(pi/180)))+face_width/2
y=(face_height/2*Math.sin(angle*(pi/180)))+face_height/2
if (angle==90) {
document.write('<div style="position:absolute;left:'+(x)+'px;top:'+(y-2)+'px;background-color:'+face_outlinecolor+';width:'+face_outlineweight+'px;height:'+(face_outlineweight+2)+'px;overflow:hidden"></div>')
}
else if (angle==270) {
document.write('<div style="position:absolute;left:'+(x)+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+(face_outlineweight)+'px;height:'+(face_outlineweight+2)+'px;overflow:hidden"></div>')
}

else if (angle==0) {
document.write('<div style="position:absolute;left:'+(x-2)+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+(face_outlineweight+2)+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
}

else if (angle==180) {
document.write('<div style="position:absolute;left:'+(x)+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+(face_outlineweight+2)+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
}

else {
document.write('<div style="position:absolute;left:'+x+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+face_outlineweight+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
}
}
for (i=1;i<=hand_sec_length;i++) {
document.write('<div id="sec'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_sec_color+';width:'+hand_sec_weight+'px;height:'+hand_sec_weight+'px;overflow:hidden"></div>')
}
for (i=1;i<=hand_min_length;i++) {
document.write('<div id="min'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_min_color+';width:'+hand_min_weight+'px;height:'+hand_min_weight+'px;overflow:hidden"></div>')
}
for (i=1;i<=hand_hour_length;i++) {
document.write('<div id="hour'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_hour_color+';width:'+hand_hour_weight+'px;height:'+hand_hour_weight+'px;overflow:hidden"></div>')
}
document.write('</div>')
window.onload=dorotate

</script>


Kodda bulunan Copyright anlaşmasını silmeyiniz.
Script configuration stars here ve script configuration ends here takıları arasında istediğiniz değişiklikleri yapabilirsiniz.
Kodları anlayabilmek için Html kodlamasından biraz anlamak gerekir.
Konfigürasyon adımında,
-Set the color for each hand : İbrelerin renkleri (Akrep, yelkovan, saniye göstergeleri)
-Set the weight of each hand : İbrelerin kalınlıkları
-Set width and height for the face (pixels) : Saatin boyutunu göterir.
Konfigürasyon dışındaki kodlar olduğu gibi kalmalıdır.

Kaynak : http://www.fabulant.com/

Web siteniz için minik analog bir saat (Javascript)

Fantoma

Profesör

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar