هيلبرنت | Helpernt - انشاء عد تنازلي باحتراف cutdown time

السلام عليكم ورحمة الله وبركاته
حبيت اعمل حاجه كده تسليه وقت وبعد ما عملته قولت اشاركم بيه
وهو عد تنازلي بمنظر جميل واول ما الوقت ينتهي يطلع رساله انه الوقت انتهي

https://i.imgur.com/NjFKFDE.png

الكود

كود PHP:


		
			
<script src="https://conquerz-tq.com/application/javascript/jquery-3.4.1.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@700&display=swap');

body{
    background:#512E5F;
    font-family: 'Tajawal', sans-serif;
    text-align:center;
    margin:0px;
    padding:0px;
}
.box{
    background:#4A235A;
    width:50%;
    height:200px;
    margin:auto;
    margin-top:150px;
    border-radius:15px;
    border-bottom:2px dashed #C39BD3;
}
.box .countdown{
    display:flex;
    list-style-type:none;
    padding-top:50px;
    
    
}
.box .countdown{
    display:Flex;
    justify-content:space-around;
    align-content:center;
    padding-top:50px;
    
}
.countdown .time p{
        background:#78281F;
        margin-left:10px;
        padding:5px;
        width:30px;
        color:#fff;
        border-radius:5px;
        border-bottom:2px dashed;
        
}
.countdown .time span{
        color:#2E86C1;
        font-size:12px;
        margin-left:8px;
}
.countdown .space{
        margin-top:20px;
        font-size:20px;
        color:#9B59B6;
}

.box .end{
    font-size:25px;
    color:#fff;
    padding-top:50px;
    border-bottom:1px dashed;
    
}
.footer{
    color:#fff;
    background:#922B21;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding:5px;
}
.footer a{
    color:#C39BD3;
    text-decoration:none;
}
</style>

<div class="box">
<span id='Countdown'></span>
</div>
<div class="footer">
 all copyright @ <a href="https://www.facebook.com/daany10222">Mohamed Yasser</a>
</div>
<script>
                            var countDownDate4 = new Date('2021-01-14 11:28:00').getTime();
                            var x4 = setInterval(function() {
                                var Now4 = new Date().getTime();
                                var Distance4 = countDownDate4 - Now4;
                                var Days4 = Math.floor(Distance4 / (1000 * 60 * 60 * 24));
                                var Hours4 = Math.floor((Distance4 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                                var Minutes4 = Math.floor((Distance4 % (1000 * 60 * 60)) / (1000 * 60));
                                var Seconds4 = Math.floor((Distance4 % (1000 * 60)) / 1000);
                                var CheckCountDown = document.getElementById('Countdown');
                                if ( CheckCountDown ) {
                                    CheckCountDown.innerHTML = '<div class=\'countdown\'><div class="time"><p>' + Days4 + '</p><span>DAY</span></div><div class=\'space\'>:</div><div class="time"><p>' + Hours4 + '</p><span>HOUR</span></div><div class=\'space\'>:</div><div class="time"><p>' + Minutes4 + '</p><span>MINUTE</span></div><div class=\'space\'>:</div><div class="time"><p>' + Seconds4 + '</p><span>SECOUND</span></div></div>';
                                } else {
                                    clearInterval(x4);
                                }
                                if ( Distance4 < 0 ) {
                                    clearInterval(x4);
                                    document.getElementById('Countdown').innerHTML = '<div class="end">This Event Has Begin !</did>';
                                  //  location.reload();
                                }
                            }, 100);
                        </script>

بس ااتغير الوقت الي هنا

كود PHP:


		
			
2021-01-14 11:28:00

لو الوقت انتهي اتظهر رساله
This Event Has Begin !
https://i.imgur.com/2shGsrm.png