كيفاش تزيد coming soon page للموقع ديالك مع العد التنازلي

imadbelasri Html
HC

فهاد الدرس الجديد من سلسلة html & css غادي نشوفوا كيفاش نصاوبوا صفحة للموقع ديالنا كتقول للناس بلي قريبا غادي يبدا الموقع مع العد التنازلي لي غادي يتعرضوا فيه الأيام الدقائق والثواني باستعمال الجافاسكريبت فهادا درس بسيط للمبتدئين.


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


1- الملف index.php

فأول حاجة زيد projet جديد سميه لي بغيتي فيه زيد ملف سميه index.html هو الصفحة الرئيسية ديالنا عندنا فيها structure html de base  لي فيها image لي هي logo ديالك وفيها ايضا liste لي فيها غادي يتعرض العد التنازلي ال liste ul عندنا فوسطها li لي كل وحدة عطيناها id لي بيه غادي نسترجعوها فالملف الجافاسكريبت وغادي نبدلو القيمة لي فيها فكاين الأيام الساعات الدقائق والثواني والباقي ديال الكود فيه ل include ديال ملفات css و javascript  الكود ديال الملف هو :

                                                    
                                                        <!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>cOMING sOON</title>
</head>
<body>
    <header>
        <img src="logo.png" class="logo" alt="" height="100">
        <h1>Coming Soon</h1>
        <div class="line"></div>
        <ul class="list-items">
            <li class="item" id="days">
            </li>
            <li class="item" id="hours">
            </li>
            <li class="item" id="min">
            </li>
            <li class="item" id="sec">
            </li>
        </ul>
    </header>
    <script src="main.js"></script>
</body>
</html>
                                                    
                                                

2- الملف main.js

ف dossier projet ديالك زيد ملف سميه main.js فيه غادي يكون الكود الجافاسكريبت لي كيمكن من عرض العد التنازلي فكنسترجع la date finale فل variable count منبعد فل fonction setInterval لي كتمكن من العد التنازلي ولي كتاخد ا durée لي هي 1000 ولي هي ثانية يعني غادي تنقص بالثانية منبعد كنسترجع la date الحالية وكنقصها من la date finale منبعد كنخدم ب des formulaires لي كيمكنوني باش نسترجع الأيام والساعات و الدقائق والثواني من النتيجة لي هي ل variable dist منبعد كنعرض كل حاجة فل li لي كنسترجعها بل id ديالها الكود ديال الملف هو :

                                                        
                                                            var count = new Date("Mar 30, 2018 15:37:25").getTime();
var x = setInterval(function() {
  var now = new Date().getTime();
  var dist = count- now;

  var days = Math.floor(dist / (1000 * 60 * 60 * 24));
  var hours = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((dist % (1000 * 60)) / 1000);

  document.getElementById("days").textContent =  days + 'j';
  document.getElementById("hours").textContent =  hours + 'h';
  document.getElementById("min").textContent =  minutes + 'm';
  document.getElementById("sec").textContent =  seconds + 's';

  if (distance < 0) {
    clearInterval(x);
  }
}, 1000);
                                                        
                                                    

3- الملف style.css

ف dossier projet ديالك زيد ملف سميه style.css فيه غادي يكون الكود css لي كيمكن من إضافة des styles css لل projet ديالنا يلا كنتي مبتدئ شوف الدورات الخاصة بالمبتدئين ف css الكود ديال الملف هو :

                                                        
                                                            *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    text-align: center;
    height: 100%;
}
header{
    background: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: #fff;
    text-transform: uppercase;
    position: relative;
}
h1{
    position: absolute;
    letter-spacing: 8px;
    top: 40%;
    left: 40%;
}
.line{
    height: 2px;
    width: 60px;
    color: #fff;
    border-style: solid;
    border-color: #fff;
    border-width: 2px;
    position: absolute;
    letter-spacing: 8px;
    top: 50%;
    left: 49%;
}
ul.list-items{
    margin: 40px 0;
    position: absolute;
    letter-spacing: 8px;
    top: 50%;
    left: 36%;
    
}
ul.list-items{
    list-style: none;
}
ul.list-items li{
    display: inline-block;
    margin-left: 10px;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    text-transform:uppercase;
    background-color: orange;
    border-radius: 5px;
}
.logo{
    position: absolute;
    top: 20%;
    left: 49%;
}
                                                        
                                                    

دروس ذات صلة

HC

كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الاول

فهاد الدرس غادي نشوفو كيفاش نقادو الواجهة ديال موقع للتواصل الإجتماعي على شكل فيسبوك بإستعمال Html...


HC

كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الثاني

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


HC

كيفاش تعرض العنوان ديالك بإستعمال Html 5 géolocalisation

فهاد الدرس الأول من هاد السلسلة ديال html 5 géolocalisation غادي نشوفو كيفاش نقادو واحد المشروع بسيط...


HC

كيفاش تعرض الإحداثيات بإستعمال Html5 géolocalisation

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


HC

كيفاش تعرض حالة الطقس بإستعمال Html5 géolocalisation

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


HC

كيفاش تعرض الرمز البريدي ديالك بإستعمال Html 5 géolocalisation

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


HC

كيفاش ترسم مسار بإستعمال Html 5 géolocalisation

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


HC

كيفاش تعرض معلومات على الخريطة بإستعمال Html 5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو واحد المشروع لي كيمكن المستخدم من أنه يبحث على شي حاجة بغاها مث...


HC

كيفاش تعرض معلومات من قاعدة البيانات على الخريطة بإستعمال Html 5 géolocalisation

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


HC

موقع للمبتدئين بل Html و Css

فهاد الدرس الجديد من موقع للمبتدئين بل Html و Css ولي عبارة عن Template بسيطة للمبتدئين فيها صفحة و...