急！求时钟代码思路或代码

以图片格子形式显示本地时间，时间的格子颜色和其他格子的颜色区分开

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

图片格子是什么意思？？？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#date {
background-color:#06F;
color:white;
}
#time {
background-color:#900;
color:white;
}
</style>
<script type="text/javascript">
function showTime() {
var d = new Date();
var ar = [d.getFullYear(), parseInt(d.getMonth()) + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
for (var i = 0; i < ar.length; i ++) ar[i] = dtFormat(ar[i]);
document.getElementById('date').innerHTML = ar.slice(0, 3).join('-');
document.getElementById('time').innerHTML = ar.slice(3).join(':');
}
function dtFormat(n) {
n = parseInt(n);
return n < 10 ? '0' + n : n;
}
window.onload = function() {
setInterval('showTime()', 1000);
}
</script>
</head><body>
<div>
<span id="date"></span> <span id="time"></span>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#clock img {
width:16px;
}
</style>
<script type="text/javascript">
var img = [
'http://preview.zcool.com.cn/pic/png3/164/Number_010.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_001.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_002.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_003.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_004.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_005.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_006.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_007.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_008.png',
'http://preview.zcool.com.cn/pic/png3/164/Number_009.png'
]
function showTime() {
var d = new Date();
var ar = [d.getFullYear(), parseInt(d.getMonth()) + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
for (var i = 0; i < ar.length; i ++) ar[i] = dtFormat(ar[i]);
var date = ar.slice(0, 3).join('-').split('');
var time = ar.slice(3).join(':').split('');
var clock = document.getElementById('clock');
var str = '';
for (var i = 0; i < date.length; i ++) {
if (date[i] == '-') str += '-';
else str += '<img src="' + img[date[i]] + '" />';
}
str += ' ';
clock.innerHTML = str;
str = '';
for (var j = 0; j < time.length; j ++) {
if (time[j] == ':') str += ':';
else str += '<img src="' + img[time[j]] + '" />';
}
clock.innerHTML += str;
}
function dtFormat(n) {
n = parseInt(n);
return n < 10 ? '0' + n : n;
}
window.onload = function() {
setInterval('showTime()', 1000);
}
</script>
</head><body>
<div id="clock"></div>
</body>
</html>
<DIV style="position:relative; top:0px; left:0px; width:80px; height:120px; overflow: hidden">
<SCRIPT language=javascript>
function Year_Month(){
    var now = new Date();
    var yy = now.getYear();
    var mm = now.getMonth()+1;
    var cl = '<font color="#000000">';
    if (now.getDay() == 0) cl = '<font color="#000000">';
    if (now.getDay() == 6) cl = '<font color="#000000">';
    return(cl + yy + '年' + mm + '月</font>');
} function Date_of_Today(){
    var now = new Date();
    var cl = '<font color="#000000">';
    if (now.getDay() == 0) cl = '<font color="#000000">';
    if (now.getDay() == 6) cl = '<font color="#000000">';
    return(cl + now.getDate() + '<b>日</b></font>');
} function Day_of_Today(){
    var day = new Array();
    day[0] = "星期日";
    day[1] = "星期一";
    day[2] = "星期二";
    day[3] = "星期三";
    day[4] = "星期四";
    day[5] = "星期五";
    day[6] = "星期六";
    var now = new Date();
    var cl = '<font color="#000000">';
    if (now.getDay() == 0) cl = '<font color="#000000">';
    if (now.getDay() == 6) cl = '<font color="#000000">';
    return(cl + day[now.getDay()] + '</font>');
} function CurentTime(){
    var now = new Date();
    var hh = now.getHours();
    var mm = now.getMinutes();
    var ss = now.getTime() % 60000;
    ss = (ss - (ss % 1000)) / 1000;
    var clock = hh+':';
    if (mm < 10) clock += '0';
    clock += mm+':';
    if (ss < 10) clock += '0';
    clock += ss;
    return(clock);
} function refreshCalendarClock(){
document.all.calendarClock1.innerHTML = Year_Month();
document.all.calendarClock2.innerHTML = Date_of_Today();
document.all.calendarClock3.innerHTML = Day_of_Today();
document.all.calendarClock4.innerHTML = CurentTime();
}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="68" bgcolor="#000000" height="60">');
document.write('<tr><td width="100%" height="100%" align="center">');
document.write('<table border="0" cellpadding="0" cellspacing="0" width="100%" hight="100%" bgcolor="#f2f2f2" height="60">');
document.write('<tr><td align="center" width="100%" height="100%">');
document.write('<font id="calendarClock1" style="font-family:宋体;font-size:9pt"> </font><br>');
document.write('<font id="calendarClock2" style="font-family:Arial;font-size:14pt;Line-Height=100%"> </font><br>');
document.write('<font id="calendarClock3" style="font-family:宋体;font-size:9pt;Line-Height=100%"> </font><br>');
document.write('<font id="calendarClock4" style="color:#000000;font-family:Arial;font-size:8pt;Line-Height=100%"><b> </b></font>');
document.write('</td></tr></table>');
document.write('</td></tr></table>');
setInterval('refreshCalendarClock()',1000);
</SCRIPT></DIV>
数字图片必须是透明背景的png或者gif格式，再给img设置background-color样式：
<img src="http://preview.zcool.com.cn/pic/png3/164/Number_010.png" style="background-color:#FF0;" />