برمج ساعة باستعمال javascript

منذ 4 سنوات imadbelasri Javascript
JS

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نبرمجو ساعة فالساعة غادي تكون كتعرض الوقت الحالي لي فجهاز الكومبيوتر الخاص بك مع الثواني كاي ساعة رقمية.


نظرة سريعة بالفيديو


1- الملف index.php

فاول حاجة كنزيد dossier جديد سميه js_clock زيدو ف localhost منبعد فيه زيد 3 دالملفات واحد index.php والثاني style.css والثالت script.js منبعد ف index.php غادي نزيد structure ديالي فعندي روابط لمفات css و js وعندي div عطيتها id clock فيها غادي تعرض الساعة ديالنا الكود ديال الملف هو :

                                                    
                                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Js Clock</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Heure Actuelle</h2>
            <div class="clock">
                <div id="clock">
                    
                </div>
            </div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
                                                    
                                                

2- الملف script.js

فالملف script.js غادي يكون عندي الكود javascript لي غادي يمكن من استرجاع الوقت الحالي فكنخدم بل fonction setInterval لي هي ديال javascript ولي كتمكن من جعل الثواني كيتحركوا منبعد كن créer l'objet من la classe Date لي حتى هي classe javascript منبعد كنسترجع الساعات والدقايق والثواني وعندي var period لي كنحدد بها واش AM ولا PM ولي كنحسبها بيلا كانت الساعة فايتة 12 منبعد كنتحقق يلا وصلو الدقايق ولا الثواني ل 10 كنعاود نردهم ل 0 منبعد كنسترجع div مول ل id clock وكنعطيه les valeurs الكود ديال الملف هو :

                                                        
                                                            setInterval(function(){
    var cureentTime = new Date();
    var hours = cureentTime.getHours();
    var minutes = cureentTime.getMinutes();
    var seconds = cureentTime.getSeconds();
    var period = "AM";

    if(hours >= 12){
        period = "PM";
    }
    if(hours > 12){
        hours = hours - 12;
    }
    if(seconds < 10){
        seconds = "0" + seconds;
    }
    if(minutes < 10){
        minutes = "0" + minutes;
    }
    var clock = hours + ":" + minutes + ":" + seconds + " " + period;
    $('#clock').html(clock);
},1000);
                                                        
                                                    

3- الملف style.css

فالملف style.css كنزيد les styles css لي غادي نحتاج الكود ديال الملف هو :

                                                        
                                                            body{
    background-color: #F4F4F4;
}
.container{
    width: 1110px;
    margin: 0 auto;
}
.row{
    background-color: #ffffff;
    margin: 0 auto;
    width: 50%;
    border-radius: 5px;
    text-align: center;
}
.row h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 30px;
    padding: 10px;
    border-bottom: 1px solid #e7a109;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.753);
}
.clock{
    margin: 20px auto;
    padding: 20px;
    font-size: 30px;
    padding: 10px;
    text-align: center;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.753);
}
#clock{
    background-color: #e7a109c4;
    width: 50%;
    text-align: center;
    color: #ffffff;
    border-radius: 5px;
    margin: 0 auto;
}
                                                        
                                                    

دروس ذات صلة

JS

كيفاش نصاوب إختبار بإستعمال Javascript

فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأ...


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

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


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

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


JS

لعبة Domino ب javascript

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


JS

كيفاش تصاوب jeu de math ب javascript

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


JS

application كتحسب المسافة بين المدن ب html & css & javascript

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


JS

برمج ساعة باستعمال javascript

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


JS

كيفاش تسجل المعلومات فل local storage ديال navigateur

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من الق...