ਕਿਵੇਂ 'ਕਮਿੰਗ ਸੂਨ' ਪੇਜ ਬਣਾਓ

ਕਿਵੇਂ 'ਕਮਿੰਗ ਸੂਨ' ਪੇਜ ਬਣਾਓ

ਪਹਿਲਾ ਪਗਲਾ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ：

ਸਾਡੇ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਪੂਰੇ ਪੇਜ ਨੂੰ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਨਾਲ ਢੱਕ ਦੇਣਗੇ ਅਤੇ ਇਸ ਇਮੇਜ ਵਿੱਚ ਕੁਝ ਟੈਕਸਟ ਪਾਉਣਗੇ ਤਾਕਿ ਯੂਜ਼ਰ ਨੂੰ ਪਤਾ ਚਲੇ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ。

ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ HTML ਅਤੇ CSS ਦੀ ਮਦਦ ਨਾਲ 'ਕਮਿੰਗ ਸੂਨ' ਪੇਜ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਅਗਲੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖਣ ਲਈ ਜਾਓ ਕਿ ਕਿਵੇਂ JavaScript ਦੀ ਮਦਦ ਨਾਲ 'ਕੰਟੀਨਿਊਂਡਰ ਟਾਈਮਰ' ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ。

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p id="demo">35 days</p>
  </div>
  <div class="bottomleft">
    <p>Some text</p>
  </div>
</div>

第二步 - 添加 CSS：

/* 将 body 和 html 的高度设置为 100%，以使背景图像覆盖整个页面：*/
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;
  /* 将字体大小设置为 25 像素 */
  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 = "+ ਪ੍ਰਵਾਨਤ ਹੋ ਗਿਆ ਹੈ +";
  }
}, 1000);

亲自试一试