المكونات
HTML
[html] <pre><div id="clockbase">
</div></pre>
[/html]
كود الجافا سكريبت
[js]var g_nLastTime = null;
function cssClock(hourElementId, minuteElementId)
{
// Check if we need to do an update
var objDate = new Date();
if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() 12) { nHour -= 12; } // switch from 24-hour to 12-hour system
var nMinutes = objDate.getMinutes();
// round the time
var nRound = 5;
var nDiff = nMinutes % nRound;
if(nDiff != 0)
{
if (nDiff 59)
{
// handle increase the hour instead
nHour++;
nMinutes = 0;
}
// Update the on page elements
objHour.className = ‘hr’ + nHour;
objMinutes.className = ‘min’ + nMinutes;
// Timer to update the clock every few minutes
g_nLastTime = objDate;
}
// Set a timer to call this function again
setTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so)
}
CSS
margin: 0;
padding: 0;
background: #3e5e84 url(bg_stretch.gif) repeat-x;
}
* {
margin: 0;
padding: 0;
}
#clockbase {
width: 512px;
height: 512px;
position: relative;
margin: 0 auto;
background: url(clock_bg.jpg) no-repeat;
}
#minutes {
width: 229px;
height: 229px;
position: absolute;
top: 200px;
left: 137px;
background: url(minutes-arm.png) no-repeat;
}
#hours {
width: 200px;
height: 200px;
position: absolute;
top: 220px;
left: 150px;
background: url(hours-arm.png) no-repeat left bottom;
}
#seconds {
width: 260px;
height: 260px;
position: absolute;
top: 184px;
left: 120px;
background: url(SECS.gif) no-repeat;
}
#clockbase .min05 {background-position: left top;}
#clockbase .min10 {background-position: left -229px;}
#clockbase .min15 {background-position: left -458px;}
#clockbase .min20 {background-position: left -687px;}
#clockbase .min25 {background-position: left -916px;}
#clockbase .min30 {background-position: left -1145px;}
#clockbase .min35 {background-position: left -1374px;}
#clockbase .min40 {background-position: left -1603px;}
#clockbase .min45 {background-position: left -1832px;}
#clockbase .min50 {background-position: left -2061px;}
#clockbase .min55 {background-position: left -2290px;}
#clockbase .min00 {background-position: left -2519px;}
#clockbase .hr1 {background-position: left top;}
#clockbase .hr2 {background-position: left -200px;}
#clockbase .hr3 {background-position: left -400px;}
#clockbase .hr4 {background-position: left -600px;}
#clockbase .hr5 {background-position: left -800px;}
#clockbase .hr6 {background-position: left -1000px;}
#clockbase .hr7 {background-position: left -1200px;}
#clockbase .hr8 {background-position: left -1400px;}
#clockbase .hr9 {background-position: left -1600px;}
#clockbase .hr10 {background-position: left -1800px;}
#clockbase .hr11 {background-position: left -2000px;}
#clockbase .hr12 {background-position: left -2200px;}
/*–Replaced the PNG with a GIF for IE6–*/
*html #minutes {
background: url(minutes-arm.gif) no-repeat;
}
*html #hours {
background: url(hours-arm.gif) no-repeat left bottom;
}</pre>
[/css]
النتيجه:
والأن بعد إتباعك لهذه الخطوات وتنفيذها بدقه سوف تحصل عل النتيجه المرجوه ولمشاهدة التنفيذ إضغط هنا علي هذا الرابط
