ఎలా 'ఆగమించని' పేజీని సృష్టించాలి

ఎలా 'ఆగమించని' పేజీని సృష్టించాలి

మొదటి చర్య - హ్ట్మ్ల్ జోడించండి:

మా ఉదాహరణలో, మేము మొత్తం పేజీని ఆవరించే బ్యాక్గ్రౌండ్ చిత్రాన్ని ఉపయోగించి, చిత్రంలో కొన్ని పాఠాన్ని చేర్చి, వినియోగదారులకు ఏమి జరుగుతుందో తెలియజేయడానికి ప్రయత్నిస్తున్నాము.

ఈ ఉదాహరణ లో, ఎలా HTML మరియు CSS తో 'ఆగమించని' పేజీని సృష్టించాలనేది చూపిస్తుంది. మరొక ఉదాహరణను చూసి, JavaScript తో 'క్యాలండర్ టైమర్' ను జోడించాలనేది తెలుసుకోండి.

<div class="bgimg">
  <div class="topleft">
    <p>లోగో</p>
  </div>
  <div class="middle">
    <h1>ఆగమించని</h1>
    <hr>
    <p id="demo">35 రోజులు</p>
  </div>
  <div class="bottomleft">
    <p>కొన్ని పాఠం</p>
  </div>
</div>

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

/* 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();
// ప్రతి 1 సెకన్లో కాలక్రమాన్ని నవీకరించండి
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);

亲自试一试