const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('February 03, 2021 20:35:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
    if (distance < 0) {
      clearInterval(x);
      return
    }
    var hours = Math.floor((distance % (day)) / (hour));
    var days = Math.floor(distance / (day));
    var minutes = Math.floor((distance % (hour)) / (minute));
    var seconds = Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10) ? '0' + days : days,
      document.getElementById('hours').innerText = (hours < 10) ? '0' + hours : hours,
      document.getElementById('minutes').innerText = (minutes < 10) ? '0' + minutes : minutes,
      document.getElementById('seconds').innerText = (seconds < 10) ? '0' + seconds : seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
} else {
  document.getElementById('days').innerText = '00';
  document.getElementById('hours').innerText = '00';
  document.getElementById('minutes').innerText = '00';
  document.getElementById('seconds').innerText = '00';
  document.body.innerHTML = document.body.innerHTML.replace('open', 'close');
}
#timer {
  list-style-type: none;
  justify-content: center;
  display: flex;
}

#timer>li {
  float: left;
  font-size: 50px;
  padding: 0px 20px;
  font-weight: bold;
}

.timer_text {
  font-size: 15px;
  text-align: center;
}

#countdown_text {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
}

#timerout {
  text-align: center;
}
<p id="countdown_text">Count down</p>
<p id="timerout">open</p>

<ul id="timer">
  <li class="clock_li"><span id="days"></span>
    <p class="timer_text">DAYS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="hours"></span>
    <p class="timer_text">HOURS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="minutes"></span>
    <p class="timer_text">MINUTES</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="seconds"></span>
    <p class="timer_text">SECONDS</p>
  </li>
</ul>

हाय दोस्तों! मैं समय समाप्त होने पर "खुला" टेक्स्ट को "बंद" में बदलना चाहता हूं। तो मैंने खोल दिया

0
user13851719 3 फरवरी 2021, 09:36

2 जवाब

सबसे बढ़िया उत्तर

आपको replace करने की आवश्यकता नहीं है।

बस आंतरिक HTML को इस तरह 'बंद' में बदलें:

document.getElementById('timerout').innerHTML = 'close';

इसके अलावा अपना पूरा स्टेटमेंट अपनी if कंडीशन के बाद रखें, जो इंटरवल के खत्म होने की जांच करता है:

if (distance < 0) {
  clearInterval(x);
  document.getElementById('days').innerText = '00';
  document.getElementById('hours').innerText = '00';
  document.getElementById('minutes').innerText = '00';
  document.getElementById('seconds').innerText = '00';
  document.getElementById('timerout').innerHTML = 'close';
  return
}

इसे क्रिया में देखने के लिए नीचे दिए गए स्निपेट को चलाएं, ध्यान दें कि मैंने आपका समय कल के लिए निर्धारित किया है जो पहले ही समाप्त हो चुका है:

February 02, 2021 20:35:00

इसे वापस अपनी पसंदीदा तिथि में बदलें और टाइमर के 0 हिट होने पर यह काम करेगा।

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('February 02, 2021 20:35:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
    if (distance < 0) {
      clearInterval(x);
      document.getElementById('days').innerText = '00';
      document.getElementById('hours').innerText = '00';
      document.getElementById('minutes').innerText = '00';
      document.getElementById('seconds').innerText = '00';
      document.getElementById('timerout').innerHTML = 'close';
      return
    }
    var hours = Math.floor((distance % (day)) / (hour));
    var days = Math.floor(distance / (day));
    var minutes = Math.floor((distance % (hour)) / (minute));
    var seconds = Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10) ? '0' + days : days,
      document.getElementById('hours').innerText = (hours < 10) ? '0' + hours : hours,
      document.getElementById('minutes').innerText = (minutes < 10) ? '0' + minutes : minutes,
      document.getElementById('seconds').innerText = (seconds < 10) ? '0' + seconds : seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
} else {
  //something
}
#timer {
  list-style-type: none;
  justify-content: center;
  display: flex;
}

#timer>li {
  float: left;
  font-size: 50px;
  padding: 0px 20px;
  font-weight: bold;
}

.timer_text {
  font-size: 15px;
  text-align: center;
}

#countdown_text {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
}

#timerout {
  text-align: center;
}
<p id="countdown_text">Count down</p>
<p id="timerout">open</p>

<ul id="timer">
  <li class="clock_li"><span id="days"></span>
    <p class="timer_text">DAYS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="hours"></span>
    <p class="timer_text">HOURS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="minutes"></span>
    <p class="timer_text">MINUTES</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="seconds"></span>
    <p class="timer_text">SECONDS</p>
  </li>
</ul>
1
Dr. Tenma 3 फरवरी 2021, 10:11
const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('February 03, 2021 15:54:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
      if (distance < 0) { clearInterval(x); 
      document.getElementById('timer').style.opacity = '.5';
      document.body.innerHTML = document.body.innerHTML.replace('open', 'close');
      return }
    var hours =  Math.floor((distance % (day)) / (hour));
    var days =  Math.floor(distance / (day));
    var minutes =  Math.floor((distance % (hour)) / (minute));
    var seconds =  Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10 )?'0'+days:days,
      document.getElementById('hours').innerText = (hours < 10)?'0'+hours:hours,
      document.getElementById('minutes').innerText = (minutes < 10)?'0'+minutes:minutes,
      document.getElementById('seconds').innerText = (seconds < 10)?'0'+seconds:seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
}

else {
    document.getElementById('days').innerText = '00';
    document.getElementById('hours').innerText = '00';
    document.getElementById('minutes').innerText = '00';
    document.getElementById('seconds').innerText = '00';
    
}
#timer {list-style-type:none;
        justify-content: center;
        display: flex;}

#timer > li {float:left;
             font-size:50px;
             padding:0px 20px;
             font-weight:bold;}          

.timer_text {font-size:15px;
             text-align:center;}

#countdown_text {text-align:center;
                 text-transform:uppercase;
                 font-weight:bold;
                 font-size:25px;}

#timerout {text-align:center;}
    <p id="countdown_text">Count down</p>
                <p id="timerout">open</p>
                
                <ul id="timer">
                    <li class="clock_li"><span id="days"></span><p class="timer_text">DAYS</p></li>
                    <li>:</li>
                    <li class="clock_li"><span id="hours"></span><p class="timer_text">HOURS</p></li>
                    <li>:</li>
                    <li class="clock_li"><span id="minutes"></span><p class="timer_text">MINUTES</p></li>
                    <li>:</li>
                    <li class="clock_li"><span id="seconds"></span><p class="timer_text">SECONDS</p></li>
                </ul>
                
0
user13851719 3 फरवरी 2021, 09:54