سلام برنامه | HiProgram

سلام برنامه در خدمت شماست با آموزش ساخت صفحه Coming Soon

آموزش ساخت صفحه Coming Soon به شما امکان را می دهد که زمان انتشار سایتتان را به کاربران نشان دهید

Coming soon چیست؟

از این صفحات زمانی استفاده میکنند که پروژه ای هنوز به اتمام نرسیده است و میخواهند کاربران را از زمان پایان پروژه باخبر کنند . این صفحه موقتی است و پس از پایان کار یا حذف میشود و یا انتقال میابد.

همچنین از این صفحه به عنوان لندینگ نیز میتوان یاد کرد که برای سئو کلمات کلیدی از آن استفاده میشود.

در این آموزش یاد میگیرید که یک شمارنده هوشمند تاریخ بسازید

این شمارنده به صورت معکوس و لحظه ای از زمان کم می کند تا به صفر برسد فقط کافیست شما تاریخ خود را بنویسید

برای ساخت صفحه ابتدا کد های زیر را به body خود اضافه کنید

<div class="bgimg">
  <div class="topleft">
    <p><img src="Logo.png"></p>
  </div>
  <div class="middle">
    <h1>به زودی...</h1>
    <hr>
    <p id="demo" style="font-size:30px"></p>
  </div>
  <div class="bottomleft">
    <p>لینک شما</p>
  </div>
</div>

سپس برای استایل دهی و جلوه دادن کد های زیر را  به css خود اضافه کنید

body, html {
    height: 100%;
    margin: 0;
    direction:rtl;
}

.bgimg {
    background-image:url(image_2017-04-08_17-05-46.png);
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-family: "Courier New", Courier, monospace;
    font-size: 25px;
}

.topleft {
    position: absolute;
    top: 0;
    left: 16px;
}

.topleft p img{
		width:150px;
	height:150px;
}

.bottomleft {
    position: absolute;
    bottom: 0;
    left: 16px;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

hr {
    margin: auto;
    width: 40%;
}

و در نهایت برای اجرا شمارنده کد جاوا اسکریپت زیر را به انتهای کد های html صفحه اضافه کنید

<script>
var countDownDate = new Date("Jan 10, 2018 15:37:25").getTime();

var countdownfunction = setInterval(function() {

    var now = new Date().getTime();
    
    var distance = countDownDate - now;
    
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("demo").innerHTML = days + "روز " +  hours + "ساعت " + minutes + "دقیقه " + seconds +  "ثانیه " ; 
    if (distance < 0) {
        clearInterval(countdownfunction);
        document.getElementById("demo").innerHTML = "پایان";
    }
}, ۱۰۰۰);
</script>

ما در کد بالا تاریخ Jan 10, 2018 15:37:25  را مشخص کرده ایم کافیست شما تاریخ خود و ساعت را وارد کنید

شما میتوانید آموزش تصویری را در ویدئو زیر ببینید:

همچنین می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را دریافت کنید

ویدیو آموزش در باکس دانلود زیر همین پست موجود است