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


فهاد الدرس الجديد من سلسلة 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;
}
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد