بسم الله الرحمن الرحيم
نحتاج لكي نظهر الوقت الى كائن
سنقوم بتعريف متغير ونعطيه قيمة الكائن
كود HTML:
<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
لكي نجعل الساعة تعمل بشكل دينامكي
اولا نجعلها داخل دالة
مثال
كود HTML:
<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
هذه الدالة رائعة بكل معنى الكلمة
تقوم بتنفيذ دالة اخرى داخلها بعدكل وقت ان تحدده بالميلي ثانية
مثال خارج الدرس عن عمل هذه الدالة
كود HTML:
<script type="text/javascript">
// سيتم اخراج نافذة كل خمس ثواني
// يمكن تغير الوقت كما تشاء
// 1000 = ثانية
// 5000 = خمس ثواني
setTimeout("alert('مرحبا بك في مدونة مبرمج www.bp.ma')",5000);
</script>
الأن لنرجع الى الدرس
كما قلنا في السابقة الوقت هو 14:45:56 لن يتغير ولكن لو قمت بتحديث الصفحة كل ثانية سترى ان الساعة تضيف ثانية الى الوقت
الدالة setTimeout وفرت عنا هذا الجهد وتقوم بالمهمة على اكمل وجه
اذا سيكون الكود هكذا
كود HTML:
<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>
ونضيف هذا الكود
كود HTML:
<div id="clock"><!-- سيتم طباعة الساعة هنا --></div>
في اي مكان تريد اظهار الساعة فيه
والكود بالكامل سيكون هكذا للتجربة
كود HTML:
<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>
اعرف انني بالغت في وضع الكثير من الأكواد زلكنني احببت ان تصل المعلومة بشكل افضل
للتجربة الحية
يمكنك تطوير كود الساعة الى ما تشاء
واي استفسار انا موجود ان شاء الله
هذا فان اخطات فمن نفسي والشيطان وان اصبت فمن الله عز وجل
السلام عليكم
رد مع اقتباس
....
المشاركة الأصلية كتبت بواسطة COSINUS 
