اصنع ساعه باستخدام CSS – JS

مدهش — Wed, 04 Jan 2012 23:35:03 +0000

تستطيع الأن إنشاء ساعة مع CSS. في البداية ربما كانت هذه الفكره صعبة التنفيذ

(وربما لا طائل حتى يتم إصلاح بعض عيوبها الرئيسية)،

ولكنها الأن أصبحت فكرة ممتعه ومفيده

المكونات

هذه الساعه تتكون أساسا من ثلاث طبقات وباستخدام ملفاتpng -رسومات الشبكة المحمولة -

الشفافه تستطيع عمل ملفات الثواني والدقائق والساعات وتقوم بإضافتهم فوق بعضهم كطبقات باستخدام تحديد المواقع المطلقة

HTML

[html]

[/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)
}

[/js]

CSS

وباستخدام مؤثرات CSSتستطيع وضع كل واحد من العقارب في صورة واحدة، وتحول بينهم وفقا للمهل الزمنية باستخدام المواقع الخلفية

[css] body{
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;
}
[/css]

النتيجه:

والأن بعد إتباعك لهذه الخطوات وتنفيذها بدقه سوف تحصل عل النتيجه المرجوه ولمشاهدة التنفيذ إضغط هنا علي هذا الرابط

فواصل » شرح،عمل،ساعه،بإستخدام،سي،اس،اس،و،جي،اس

اصنع ساعه باستخدام CSS – JS

المكونات

HTML

CSS

النتيجه: