صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 15 من 23

الموضوع: تعلم كيف تبرمج ساعة حية بالجافاسكريبت javascript

  1. #1

    تعلم كيف تبرمج ساعة حية بالجافاسكريبت javascript



    بسم الله الرحمن الرحيم

    نحتاج لكي نظهر الوقت الى كائن
    كود HTML:
    date()
    سنقوم بتعريف متغير ونعطيه قيمة الكائن

    كود 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>
    اعرف انني بالغت في وضع الكثير من الأكواد زلكنني احببت ان تصل المعلومة بشكل افضل

    للتجربة الحية
    يمكنك تطوير كود الساعة الى ما تشاء
    واي استفسار انا موجود ان شاء الله
    هذا فان اخطات فمن نفسي والشيطان وان اصبت فمن الله عز وجل
    السلام عليكم





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com


  2. #2
    عضو فعال
    تاريخ التسجيل
    Aug 2007
    المشاركات
    1,431

  3. #3
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    46


    جميل آمل أن لا تؤثر على الكود الأصلي وخاصة css






  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2005
    المشاركات
    400


    شكرا لك اخ عبد الواحد على هدا التطبيق والدرس الشيق ومنك نستفيد

    ============
    سؤال خارج الدرس

    من رابط مدونتك عرفت انك من المغرب , هل تعلمت JS في معهد ما ؟ ادا كان الجواب نعم ياليت اسم وعنوانه وشكرا






  5. #5


    جميل آمل أن لا تؤثر على الكود الأصلي وخاصة css
    لن يحصل اي مشكك
    شكرا لك اخ عبد الواحد على هدا التطبيق والدرس الشيق ومنك نستفيد

    ============
    سؤال خارج الدرس

    من رابط مدونتك عرفت انك من المغرب , هل تعلمت JS في معهد ما ؟ ادا كان الجواب نعم ياليت اسم وعنوانه وشكرا
    فقط من الأنترنيت
    لو كنت تريد ان تتعلم شيئ بصدق فستتعلمه حتى لو لم تدخل اي معهد





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  6. #6
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2005
    المشاركات
    400




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

    أفضل لي لانني اريد ان امتهن البرمجة , بالمناسبة مدونتك جد ممتازة






  7. #7
    عضو سوبر نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    674


    يستحق التثبيت :app:

    ++++++++++++++++++++

    عبد الواحد البشيري ... الدرس هذا للمبتدئين

    على العموم ابداع الى الامام >>>>>>

    ننتظر المزيد





    __________________
    Professional Java?Script Programmer and Web Developer

  8. #8


    نعم متفق معك لكن انا حاليا غير متفرغ ولم انهي الدراسة اضافة الى ان البرمجة بشهادة او دبلوم

    أفضل لي لانني اريد ان امتهن البرمجة , بالمناسبة مدونتك جد ممتازة
    صحيح العمل بالشهادة احسن من دونها
    لا اعتقد انك ستجد معهد لدراسة الجافاسكريبت على الأقل في مدينة الناظور

    يستحق التثبيت :app:

    ++++++++++++++++++++

    عبد الواحد البشيري ... الدرس هذا للمبتدئين

    على العموم ابداع الى الامام >>>>>>

    ننتظر المزيد
    نعم هو للمبتدئين
    السبب في كتابتي لهذا الدرس هو انني لم اجد موضوع بالعربية يتكلم عن برمجة الساعة الحية على الأقل في سوالف





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  9. #9
    عضو نشيط
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


    شي جميل مع انه متل ما قال ليوناردو للمبتدئين
    لكن لو مثلاً تبحث عن كيفية عرض توقيت السيرفر و تخليها حية مثل هذه رح يصير الموضوع مفيد اكثر خاصةً و ان هذه الساعة بتظهر التوقيت يلي في الجهاز وليس يلي على السيرفر

    انا كان عندي دالة معقدة شوي بتظهر التوقيت من السيرفر مع التاريخ سواء كان السيرفر يعتمد على php او asp و كمان خيار فرق التوقيت إذا أردت تزيد أو تنقص ساعات بحيث يكون متواقق مع بلد معين وحية أيضاً عن طريق الجافا

    لو تحاول تعمل دالة مثلها لكن بشكل ابسط رح يكون موضوعك أفيد و افضل

    شكرا لك






  10. #10
    عضو نشيط جدا
    تاريخ التسجيل
    Apr 2008
    المشاركات
    361


    شكرا على الدرس.

    كيف يتم الحاق صورة في إظهار الساعة ؟

    بارك الله فيك.






  11. #11


    شي جميل مع انه متل ما قال ليوناردو للمبتدئين
    لكن لو مثلاً تبحث عن كيفية عرض توقيت السيرفر و تخليها حية مثل هذه رح يصير الموضوع مفيد اكثر خاصةً و ان هذه الساعة بتظهر التوقيت يلي في الجهاز وليس يلي على السيرفر

    انا كان عندي دالة معقدة شوي بتظهر التوقيت من السيرفر مع التاريخ سواء كان السيرفر يعتمد على php او asp و كمان خيار فرق التوقيت إذا أردت تزيد أو تنقص ساعات بحيث يكون متواقق مع بلد معين وحية أيضاً عن طريق الجافا

    لو تحاول تعمل دالة مثلها لكن بشكل ابسط رح يكون موضوعك أفيد و افضل

    شكرا لك
    اولا بالنسبة للدرس هو موجه للميتدئين
    هذا هو التعليق الثاني الذي يذكر انه للمبتدئين .. يأخي الا يحق للمبتدئ ان يجد درس حسب مستواه ؟ ام ان سوالف سوفت لا يوجد فيها مبتدئين ...

    ثانيا هو انني لم اجد اي درس هنا في سوالف يتكلم عن هذا الموضوع

    اما بالنسبة للتوقيت العالمي او لدول اخرى فأمره سهل ربما سأكتب درس ثاني عنه

    ملاحظة :
    اعتقد انه من الأفضل ان يكون التوقيت هو توقيت الجهاز لانني اذا كنت في امريكا سيظهر لي التوقيت المحلي وهذا ما احتاج اليه ...


    شكرا على الدرس.

    كيف يتم الحاق صورة في إظهار الساعة ؟

    بارك الله فيك.
    وفيك بارك اخي

    لم افهم سؤالك





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  12. #12
    عضو سوبر نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    674


    طيب ممكن نستفيد منك , لو شرح لكود معقد , او شئ نادر





    __________________
    Professional Java?Script Programmer and Web Developer

  13. #13


    طيب ممكن نستفيد منك , لو شرح لكود معقد , او شئ نادر
    لو عملنا مقارنة بيني وبينك ستجد انني اقل منك بكثير في جافاسكريبت

    يأخي انا لا زلت اتعلم جافاسكريبت
    ليس كل من يكتب درس عن جزئية فهو محترف ..
    العقبة الكبرى اتي تواجهني هي اللغة الانجليزية 90% مما تعلمته فقط من الدروس العربية اما الانجليزية فأنا اتعلم من الكود الموجود في الدرس ولا التفت الى الشرح الانجليزي
    لهذا ستجدني ضعيف في اشياء كثيرة

    قبل ان افهم كيفية البرمجة بلغة جافاسكريبت كنت اريد ان اعرف كيف تبرمج ساعة حية ولم استطيع ....

    تحياتي





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  14. #14
    عضو نشيط جدا
    تاريخ التسجيل
    Apr 2008
    المشاركات
    361


    وفيك بارك اخي

    لم افهم سؤالك
    اقصد ان الوقت يظهر من خلال صورة لساعة مع عقاربها كما في العديد من المواقع.






  15. #15


    اقصد ان الوقت يظهر من خلال صورة لساعة مع عقاربها كما في العديد من المواقع.
    شوف هذا الرابط يمكن تستفيد منه Tick Tock - A CSS & Javascript Experiment by Soh Tanaka هو معقد شيئا ما





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا|شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض