i tried for you and i found some little mistakes. removed them from file. then use new version
clockp.js
*********
var clocksize = 50;
var colnumbers = 'ffffff';
var colseconds = 'fff';
var colminutes = 'fff';
var colhours = 'fff';
var numstyle = 2;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos = 0;
var ypos = 0;
var horemovedn = 0;
clockh.js
*********
var dayname = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
var am = 'AM';
var pm = 'PM';
var pi = Math.PI;
var d = document;
var pi2 = pi / 2;
var rad = (+clocksize) / 2;
var ctrX = (+xpos) + rad;
var ctrY = (+ypos) + rad;
var hourln = 1;
var minln = secln = 2;
for (var i = 0; i < (rad / 2) + (rad / 16); i++) {
horemovedn += 1;
}
for (var i = 0; i < (rad / 2) - (rad / 8); i++) {
minln += 2; secln += 2;
}
var font_size = rad / 4;
var offset = 16;
var clocknum = [[, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [, 'I', 'II', 'III', 'IIII', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'], [, '·', '·', '-', '·', '·', '|', '·', '·', '-', '·', '·', '||']];
if (numstyle < 0 || numstyle > 2)
numstyle = 0;
function timeZone(now, loc, mtz, dst) {
if (loc) {
var dow = now.getDay();
var second = now.getSeconds();
var minute = now.getMinutes(); var hour = now.getHours();
} else { now.setUTCMinutes(now.getUTCMinutes() + (mtz + dst) * 60); var dow = now.getUTCDay(); var second = now.getUTCSeconds(); var minute = now.getUTCMinutes(); var hour = now.getUTCHours(); } if (hour > 11) { moa = pm; hour -= 12; } else moa = am; return [dow, moa, hour, minute, second];
} function commonClock(n) { n.style.position = 'absolute'; n.style.top = '0'; n.style.left = '0'; n.style.visibility = 'hidden'; } function displayClock() {
if (!d.getElementById) return; var ctx = document.createElement('div'); if (fix) { ctx.style.position = 'relative'; ctx.style.margin = 'auto'; ctx.style.width = (clocksize + offset * 2) + 'px'; ctx.style.height = (clocksize + offset * 2) + 'px'; ctx.style.overflow = 'visible'; } var cn = []; for (var i = 12; i > 0; i--) { cn[i] = document.createElement('div'); cn[i].id = 'cnum' + i; commonClock(cn[i]); cn[i].style.width = (offset * 2) + 'px'; cn[i].style.height = (offset * 2) + 'px'; cn[i].style.fontFamily = font_family; cn[i].style.fontSize = font_size + 'px'; cn[i].style.color = '#' + colnumbers; cn[i].style.textAlign = 'center'; cn[i].style.paddingTop = '10px'; cn[i].style.zIndex = 1000; cn[i].innerHTML = clocknum[numstyle][i]; ctx.appendChild(cn[i]); } var mn = []; for (i = minln; i > 0; i--) { mn[i] = document.createElement('div'); mn[i].id = 'cmin' + i; commonClock(mn[i]); mn[i].style.width = '1px'; mn[i].style.height = '1px'; mn[i].style.fontSize = '1px'; mn[i].style.backgroundColor = '#' + colminutes; mn[i].style.zIndex = 997; ctx.appendChild(mn[i]); } var hr = []; for (i = hourln; i > 0; i--) { hr[i] = document.createElement('div'); hr[i].id = 'chour' + i; commonClock(hr[i]); hr[i].style.width = '2px'; hr[i].style.height = '2px'; hr[i].style.fontSize = '2px'; hr[i].style.backgroundColor = '#' + colhours; hr[i].style.zIndex = 998; ctx.appendChild(hr[i]); } var sc = []; for (i = secln; i > 0; i--) { sc[i] = document.createElement('div'); sc[i].id = 'csec' + i; commonClock(sc[i]); sc[i].style.width = '1px'; sc[i].style.height = '1px'; sc[i].style.fontSize = '1px'; sc[i].style.backgroundColor = '#' + colseconds; sc[i].style.zIndex = 999; ctx.appendChild(sc[i]); } var am = document.createElement('div'); am.id = 'ampm'; commonClock(am); am.style.width = ((xpos + rad) * 2) + 'px'; am.style.fontFamily = font_family; am.style.fontSize = (font_size * 2 / 3) + 'px'; am.style.color = '#' + colnumbers; am.style.textAlign = 'center'; am.style.paddingTop = '10px'; am.style.zIndex = 990; ctx.appendChild(am); var zn = document.createElement('div'); zn.id = 'zone'; commonClock(zn); zn.style.width = ((xpos + rad) * 2) + 'px'; zn.style.fontFamily = font_family; zn.style.fontSize = (font_size * 2 / 3) + 'px'; zn.style.color = '#' + colnumbers; zn.style.textAlign = 'center'; zn.style.paddingTop = '10px'; zn.style.zIndex = 990; ctx.appendChild(zn);
d.getElementById('clock_a').appendChild(ctx); for (var i = 12; i > 0; i--) { d.getElementById('cnum' + i).style.top = (ctrY - offset + rad * Math.sin(i * pi / 6 - pi2)) + 'px'; d.getElementById('cnum' + i).style.left = (ctrX - offset + rad * Math.cos(i * pi / 6 - pi2)) + 'px'; d.getElementById('cnum' + i).style.visibility = 'visible'; } updateClock(); } function moveClock(l, e, f) { for (var i = l; i > 0; i--) { d.getElementById(e + i).style.top = (ctrY + i * Math.sin(f)) + 'px'; d.getElementById(e + i).style.left = (ctrX + i * Math.cos(f)) + 'px'; d.getElementById(e + i).style.visibility = 'visible'; } }
function updateClock() {
var now = new Date();
var theTime = timeZone(now, localZone, mytimezone, dst);
d.getElementById('ampm').style.top = (ypos + rad / 3) + 'px';
d.getElementById('ampm').style.visibility = 'visible';
if (!localZone) {
d.getElementById('zone').style.top = (ctrY + (rad / 10)) + 'px';
d.getElementById('zone').innerHTML = city + '' + country;
d.getElementById('zone').style.visibility = 'visible';
}
moveClock(secln, 'csec', pi * theTime[4] / 30 - pi2); moveClock(minln, 'cmin', pi * theTime[3] / 30 - pi2); moveClock(hourln, 'chour', pi * theTime[2] / 6 + pi * (+now.getMinutes()) / 360 - pi2); setTimeout('updateClock()', 100);
}
window.onload = displayClock;
i made clock_a divs style background-color:Black, after then i saw the watch.
i hope it will solve the problem
Submit an article or tip