Fancy Clock : Clock : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Clock »

 

Fancy Clock



//World Clock (No DST - standard time only!) 
//By http://www.btinternet.com/~kurt.grigg/javascript


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>World Clock. No DST, standard time only!</title>


<style type = "text/css">
body{
 background-color : #000000;
}
/*Alter .theContainer background colour & border styles only*/


.theContainer{
position:relative;width:120px;height:160px;text-align:center;
background-color:#880000;border: 2px solid #ff0000;
}
.handsanddotsstyle{
position:absolute;top:0px;left:0px;width:2px;height:2px;
font-size:2px;background-color:#000000;
}
.ampmstyle{
position:absolute;top:0px;left:0px;width:20px;height:10px;
text-align:center;font-family:arial,sans-serif;font-size:12px;color:#000000;
}
.datestyle{
position:absolute;top:0px;left:0px;width:100px;text-align:center;
font-family:arial,sans-serif;font-size:11px;color:#000000;
}
.facestyle{
position:absolute;top:0px;left:0px;width:15px;height:15px;
text-align:center;font-family:arial,sans-serif;font-size:10px;color:#000000;
}
.citystyle{
position:absolute;top:0px;left:0px;width:110px;height:20px;z-index:100;
}
.selectstyle{
width:110px;font-family:arial,sans-serif;font-size:12px;color:#ffffff;
background:#000000;
}
</style>






</head>
<body>

<p>
<script type="text/javascript">
//World Clock (No DST - standard time only!) 
//By http://www.btinternet.com/~kurt.grigg/javascript



if ((document.getElementById && 
document.firstChild &&
typeof document.getElementsByTagName != "undefined"&&
window.addEventListener || window.attachEvent){
(function(){

//Alter clock colours here:

var fCol = "#fff000"//face/number colour.
var dCol = "#ff0000"//dot colour.
var hCol = "#ffffff"//hours colour.
var mCol = "#ffffff"//minutes colour.
var sCol = "#ff0000"//seconds colour.
var cCol = "#fff000"//date colour.
var aCol = "#ff0000"//am-pm colour.
var bCol = "#880000"//select/form background colour.
var tCol = "#fff000"//select/form text colour.

//Add places here - make sure format is correct!

var locations = [
["Your Time","0"],
["GMT","0"],  
["Rome","1"]
["Cairo","2"]
["Moscow","3"]
["Tehran","3.30"]
["Karachi","5"]
["Bombay","5.30"]
["Kathmandu","5.45"],
["Bangkok","7"]
["Hong Kong","8"]
["Tokyo","9"]
["Darwin","9.30"]
["Sydney","10"]
["Suva","12"]
["Honolulu","-10"]
["San Francisco","-8"]
["Arizona","-7"]
["New York","-5"]
["Newfoundland","-3.30"]
["Nuuk","-3"]];


//Alter nothing below! Alignments will be lost!

var d = document;
var idx = d.getElementsByTagName('div').length;
var ids = d.getElementsByTagName('select').length;

var y = 87;
var x = 60;
var h = 4;
var m = 5;
var s = 5;
var cf = [];
var cd = [];
var ch = [];
var cm = [];
var cs = [];
var face = "3 4 5 6 7 8 9 10 11 12 1 2";
face = face.split(" ");
var n = face.length;
var e = 360/n;
var hDims = 30/4;
var zone = 0;
var isItLocal = true;
var ampm = "";
var daysInMonth = 31;
var todaysDate = "";
var oddMinutes;
var getOddMinutes;
var addOddMinutes;
var plusMinus = false;

d.write("<div class = 'theContainer'>"                                    
+"<div id = 'theCities"+idx+"' class = 'citystyle'>"
+"<p style = 'margin:0px;'>" 
+"<select id = 'city"+ids+"' class = 'selectstyle'>");

for (var i = 0; i < locations.length; i++){
 d.write("<option value = "+locations[i][1]+">"+locations[i][0]+"</option>");
}

d.write("</select></p></div>");

d.write('<div id = "theDate'+(idx)+'" class "datestyle" style = "color:'+cCol+'">!</div>');
d.write('<div id = "amOrPm'+(idx)+'" class "ampmstyle" style = "color:'+aCol+'">!</div>');

for (var i = 0; i < n; i++){
 d.write('<div id = "theFace'+(idx+i)+'" class="facestyle" style="color:'+fCol+'">'+face[i]+'</div>'); 
}

for (var i = 0; i < n; i++){
 d.write('<div id = "theDots'+(idx+i)+'" class "handsanddotsstyle" style = "background-color:'+dCol+'"></div>');
}

for (var i = 0; i < h; i++){
 d.write('<div id = "H'+(idx+i)+'" class "handsanddotsstyle" style = "background-color:'+hCol+'"></div>');
}

for (var i = 0; i < m; i++){
 d.write('<div id = "M'+(idx+i)+'" class "handsanddotsstyle" style = "background-color:'+mCol+'"></div>');
}

for (var i = 0; i < s; i++){
 d.write('<div id = "S'+(idx+i)+'" class "handsanddotsstyle" style = "background-color:'+sCol+'"></div>');
}

d.write("</div>");



function init(){
for (var i = 0; i < n; i++){
 cf[i= d.getElementById("theFace"+(idx+i)).style;
  cf[i].top = y-6+30*1.4*Math.sin(i*e*Math.PI/180)+"px";
  cf[i].left = x-6+30*1.4*Math.cos(i*e*Math.PI/180)+"px";
 }

for (var i = 0; i < n; i++){
 cd[i= d.getElementById("theDots"+(idx+i)).style;
  cd[i].top = y+30*Math.sin(i*e*Math.PI/180)+"px";
  cd[i].left = x+30*Math.cos(i*e*Math.PI/180)+"px";
 }

for (var i = 0; i < h; i++){
 ch[i= d.getElementById("H"+(idx+i)).style;
 }

for (var i = 0; i < m; i++){
 cm[i= d.getElementById("M"+(idx+i)).style;
 }

for (var i = 0; i < s; i++){
 cs[i= d.getElementById("S"+(idx+i)).style;
 }


d.getElementById("amOrPm"+idx).style.top = y-8+"px";
d.getElementById("amOrPm"+idx).style.left = x+6+"px";

d.getElementById("theCities"+idx).style.top = y-80+"px";
d.getElementById("theCities"+idx).style.left = x-55+"px";

d.getElementById("theDate"+idx).style.top = y+55+"px";
d.getElementById("theDate"+idx).style.left = x-49+"px";

d.getElementById("city"+ids).style.backgroundColor = bCol;
d.getElementById("city"+ids).style.color = tCol;

ClockAndAssign();
}


function lcl(){
var c = document.getElementById("city"+ids);
zone = c.options[c.selectedIndex].value;
isItLocal = (c.options[0].selected);
plusMinus = (zone.charAt(0== "-");
oddMinutes = (zone.indexOf("."!= -1);
if (oddMinutes){
 getOddMinutes = zone.substring(zone.indexOf(".")+1,zone.length);
 }
if (plusMinus)
 addOddMinutes = (oddMinutes)?parseInt(-getOddMinutes):0;
else
 addOddMinutes = (oddMinutes)?parseInt(getOddMinutes):0;
}


function ClockAndAssign(){
var hourAdjust = 0;
var dayAdjust = 0;
var monthAdjust = 0;
var now = new Date();
var ofst = now.getTimezoneOffset()/60;

var secs = now.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){ 
 secOffSet = secs + 45;
 }
var sec = Math.PI * (secOffSet/30);

var mins = now.getMinutes();
if (oddMinutes){ 
 mins = mins+addOddMinutes;
 }

var minOffSet = mins - 15;
if (mins < 15){ 
 minOffSet = mins + 45;
 }
var min = Math.PI * (minOffSet/30);

if (mins < 0){
 mins += 60;
 hourAdjust = -1;
 }

if (mins > 59){
 mins -= 60;
 hourAdjust = 1;
 }

hr = (isItLocal)?now.getHours()+hourAdjust:(now.getHours()+parseInt(ofst))+parseInt(zone)+hourAdjust;
hrs = Math.PI * (hr-3)/+ Math.PI * (parseInt(mins)) 360;

if (hr < 0){
 hr += 24;
 dayAdjust = -1;
 }

if (hr > 23){
 hr -= 24;
 dayAdjust = 1;
 }

day = now.getDate() + dayAdjust;
if (day < 1){
 day += daysInMonth; 
 monthAdjust = -1;
 }

if (day > daysInMonth){
 day -= daysInMonth; 
 monthAdjust = 1;
 }

month = parseInt(now.getMonth() + monthAdjust);
if (month == 2){
 daysInMonth = 28;
 }

year = now.getYear();
if (year < 2000){
 year = year + 1900;
 }

leapYear = (year%== 0);
if (leapYear&&month == 2){
 daysInMonth = 29;
 }

if (month < 1){
 month += 12;
 year--;
 }

if (month > 12){
 month -= 12;
 year++;
 }

todaysDate = day+" "+month+" "+year;
ampm = (hr > 11)?"pm":"am";

for (var i = 0; i < s; i++){
 cs[i].top = y+(i*hDims)*Math.sin(sec"px";
 cs[i].left = x+(i*hDims)*Math.cos(sec"px";
 }

for (var i = 0; i < m; i++){
 cm[i].top = y+(i*hDims)*Math.sin(min"px";
 cm[i].left = x+(i*hDims)*Math.cos(min"px";
 }

for (var i = 0; i < h; i++){
 ch[i].top = y+(i*hDims)*Math.sin(hrs"px";
 ch[i].left = x+(i*hDims)*Math.cos(hrs"px";
 }

d.getElementById("amOrPm"+idx).firstChild.data = ampm;
d.getElementById("theDate"+idx).firstChild.data = todaysDate;
setTimeout(ClockAndAssign,100);
}


if (window.addEventListener){
 window.addEventListener("load",init,false);
 d.getElementById("city"+ids).addEventListener("change",lcl,false);
 }  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 d.getElementById("city"+ids).attachEvent("onchange",lcl);
 

})();
}

</script>
</p>



</body>
</html>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Clock