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


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


بحث في الموقع


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