কিভাবে "আসতে চলেছে" পৃষ্ঠা তৈরি করা হয়

কিভাবে "আসতে চলেছে" পৃষ্ঠা তৈরি করা হয়

প্রথম পদক্ষেপ - HTML যোগ করা:

আমাদের উদাহরণে, আমরা একটি পৃষ্ঠা জুড়ে বিস্তৃত পেছনের ছবি ব্যবহার করব

এই উদাহরণটি হলো কিভাবে HTML এবং CSS ব্যবহার করে "আসতে চলেছে" পৃষ্ঠা তৈরি করা হয়। আপনারা আগামী উদাহরণটি দেখে জানতে পারবেন কিভাবে JavaScript ব্যবহার করে "কালকেন্দ্রিক টাইমার" যোগ করা হয়。

<div class="bgimg">
  <div class="topleft">
    <p>লোগো</p>
  </div>
  <div class="middle">
    <h1>আসতে চলেছে</h1>
    <hr>
    <p id="demo">35 days</p>
  </div>
  <div class="bottomleft">
    <p>কিছু টেক্সট</p>
  </div>
</div>

দ্বিতীয় পদক্ষেপ - CSS যোগ করা:

/* body এবং html-এর উচ্চতা ১০০% হিসাবে সেট করা যাতে পেছনের ছবি সমস্ত পৃষ্ঠা সম্পূর্ণ করে */
body, html {
  height: 100%
}
.bgimg {
  /* পেছনের ছবি */
  background-image: url('/w3images/forestbridge.jpg');
  /* পুরো স্ক্রোল */
  height: 100%;
  /* পেছনের ছবি মধ্যে অবস্থান করানো */
  background-position: center;
  /* ছবি সম্পূর্ণ করা */
  background-size: cover;
  /* position: relative যোগ করে ছবির ভিতরের সমস্ত অবস্থানকারী ইলেকট্রনিক জিনিসকে অবস্থান করা (টেক্সট প্রস্থাপন) */
  position: relative;
  /* .bgimg কন্টেনারের সকল ইলেকট্রনিক জিনিসকে সাদা টেক্সট রঙ যোগ করা */
  color: white;
  /* ফন্ট যোগ করা */
  font-family: "Courier New", Courier, monospace;
  /* ফন্ট আকার ২৫ পিক্সেল হিসাবে সেট করা */
  font-size: 25px;
}
/* ডান উপরের কোণে টেক্সট অবস্থান করানো */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* ডান নিচের কোণে টেক্সট অবস্থান করানো */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* মধ্যে টেক্সট অবস্থান করানো */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* <hr> তত্ত্বাবলী সেট করুন */
hr {
  margin: auto;
  width: 40%;
}

亲自试一试

পদক্ষেপ ৩ - জাভাস্ক্রিপ্ট যোগ করুন:

জাভাস্ক্রিপ্ট যোগ করে কালকেন্দ্রিক নিয়ন্ত্রক তৈরী করুন:

// আমরা কলকেন্দ্রিক নিয়ন্ত্রণ করতে চাই এমন তারিখ সেট করুন
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// প্রতি ১ সেকেন্ড কালকেন্দ্রিক নিয়ন্ত্রণ অপসারণ
var x = 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);
  // id="demo"-র তত্ত্বাবলীতে ফলাফল দেখান
  document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
  + minutes + "m " + seconds + "s ";
  // যদি কালকেন্দ্রিক শেষ হয়েছে, কোনো লেখা লিখুন。
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

亲自试一试