تعلم كيف تبرمج ساعة حية بالجافاسكريبت JavaScript
مدرج تحت قسم: دروس
نحتاج لكي نظهر الوقت الى كائن
date()
سنقوم بتعريف متغير ونعطيه قيمة الكائن.
<script type="text/javascript"> var date=new Date(); // يحتوي على الوقت والتاريخ ويعمل على وقت الجهاز var h=date.getHours(); // جلب الساعات var m=date.getMinutes(); // جلب الدقائق var s=date.getSeconds(); // جلب الثواني // طباعة الساعة مع نقطتين مع الدقائق مع نقطتين مع الثواني // ليعطي شكل الساعة المعروف document.write(h +":"+ m +":"+ s); </script>
الكود السابق يطبع الوقت الحالي وهو جامد يعني أن الساعة لا تتحرك. مثال:
14:45:56
لكي نجعل الساعة تعمل بشكل ديناميكي
أولا: نجعلها داخل دالة
مثال:
<script type="text/javascript">
function clock(){
var date=new Date(); // يحتوي على الوقت والتاريخ ويعمل على وقت الجهاز
var h=date.getHours(); // جلب الساعات
var m=date.getMinutes(); // جلب الدقائق
var s=date.getSeconds(); // جلب الثواني
// طباعة الساعة مع نقطتين مع الدقائق مع نقطتين مع الثوني
// ليعطي شكل الساعة المعروف
document.write(h +":"+ m +":"+ s);
}
</script>
هل هذا يكفي ؟ بالطبع لا! سنضيف الدالة التي تاتي مع اللغة setTimeout. هذه الدالة رائعة بكل معنى الكلمة تقوم بتنفيذ دالة أخرى داخلها بعد كل وقت أنت تحدده بجزء من الثانية.
مثال خارج الدرس عن عمل هذه الدالة:
<script type="text/javascript">
// سيتم إخراج نافذة كل خمس ثواني
// يمكن تغير الوقت كما تشاء
// 1000 = ثانية
// 5000 = خمس ثواني
setTimeout("alert('مرحبا بك في مدونة مبرمج www.bp.ma')",5000);
</script>
الآن لنرجع الى الدرس
كما قلنا في السابق الوقت هو 14:45:56 لن يتغير، ولكن لو قمت بتحديث الصفحة كل ثانية سترى أن الساعة تضيف ثانية إلى الوقت. الدالة setTimeout وفرت علينا هذا الجهد وتقوم بالمهمة على أكمل وجه.
إذاً سيكون الكود هكذا:
<script type="text/javascript">
function clock(){
var date=new Date(); // يحتوي على الوقت والتاريخ ويعمل على وقت الجهاز
var h=date.getHours(); // جلب الساعات
var m=date.getMinutes(); // جلب الدقائق
var s=date.getSeconds(); // جلب الثواني
// طباعة الساعة مع نقطتين مع الدقائق مع نقطتين مع الثوني
// ليعطي شكل الساعة المعروف
var now=(h +":"+ m +":"+ s);
// هذا السطر سيعطي القيمة إلى هذا الكود
// <div id="clock"><!-- سيتم طباعة الساعة هنا --></div>
document.getElementById('clock').innerHTML=now;
setTimeout("clock()",1000);
}
onload=clock; // إذا مسحت هذا السطر فلن يتم إظهار الساعة
</script>
ونضيف هذا الكود في اي مكان تريد إظهار الساعة فيه
<div id="clock"><!-- سيتم طباعة الساعة هنا --></div>
والكود بالكامل سيكون هكذا للتجربة
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>clock 1.0</title>
<script type="text/javascript">
/*
author: abdelouahid elbachiri
site : http://www.bp.ma
date : 31.01.2009 15:20:20
*/
function clock(){
var date=new Date(); // يحتوي على الوقت والتاريخ ويعمل على وقت الجهاز
var h=date.getHours(); // جلب الساعات
var m=date.getMinutes(); // جلب الدقائق
var s=date.getSeconds(); // جلب الثواني
// طباعة الساعة مع نقطتين مع الدقائق مع نقطتين مع الثوني
// ليعطي شكل الساعة المعروف
var now=(h +":"+ m +":"+ s);
document.getElementById('clock').innerHTML=now;
setTimeout("clock()",1000);
}
onload=clock; // اذا مسحت هذا السطر لن يتم اظهار الساعة
</script>
</head>
<body>
<div id="clock"><!-- سيتم طباعة الساعة هنا --></div>
</body>
</html>
أعرف أنني بالغت في وضع الكثير من الأكواد ولكنني أحببت أن تصل المعلومة بشكل أفضل. التجربة الحية.
thanks for ur programme please if you can write example of ajax
ولماذا تريد اجاكس ما دامت الساعة تعمل بسلسة ؟
ممتاز اخي عبد الواحد
اهذه كلاسات مبنية داخل مكتبات الجافا سكريبت date=new Date()
تحياتي لك
صحيح
تأتي مع اللغة .. كما يوجد عدد كبير من الدوال لكل الاحتياجات
شرح رائع واللى اعجبني اكثر التسلسل بالفكرة والى الامااام والله يوفقك ويسهل امورك يارب
وان شاء الله راح اتقن الجافاسكربت على ايديى اناس امثالك حبيب قلبي
والى الامااام
لكن لدي استفسار ماهو افضل محرر نصوص اكتب فية اكوادي
انا الحين استخدم الفرونت بيج 2003 فهل هو جميل
ام هناك افضل منة
ولك جزيل شكري وتقديري
alcenator :
العفو اخي
بالنسبة للمحرركنت استخدم في windows هذا المحرر
http://notepad-plus.sourceforge.net/
NOTPADE++
وانا الأن استخدم geany على اللينوكس
وهذا رابط التحميل على windows
http://www.geany.org/Support/RunningOnWindows
شكرا لك
و يمكننا استخدام هذا الكود البسيط لوضع اليوم والتاريخ والساعة بالساعةوالدقائق والثواني وصباحا أو مساء
function runClock(){
var today = new Date();
document.getElementById(”clock”).innerHTML= today.toLocaleString();
setTimeout(”runClock()”, 1000);
}
onload=runClock;
السيئ بها انها تعمل على وقت الجهاز
السلام عليكم
جزاك الله كل خير اخي العزيز
درس رائع جداً , وقد أستخدمته في موقعي :)
مع فائق التقدير والأحترام