Как сделать так, чтобы таймер акции после окончания выводил сообщение?

185

20 августа 2018, 18:50

Есть код на фидле, необходимо добавить всплывающее окно после завершения акции

var deadline = new Date("2018, 7, 19"); 
initializeClock('clock', deadline); 
 
function getTimeRemaining(endtime) { 
  var t = Date.parse(endtime) - Date.parse(new Date()); 
  var seconds = Math.floor((t / 1000) % 60); 
  var minutes = Math.floor((t / 1000 / 60) % 60); 
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24); 
  var days = Math.floor(t / (1000 * 60 * 60 * 24)); 
  return { 
    'total': t, 
    'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
  }; 
} 
 
function initializeClock(id, endtime) { 
  var clock = document.getElementById(id); 
  var daysSpan = clock.querySelector('.days'); 
  var hoursSpan = clock.querySelector('.hours'); 
  var minutesSpan = clock.querySelector('.minutes'); 
  var secondsSpan = clock.querySelector('.seconds'); 
 
  function updateClock() { 
    var t = getTimeRemaining(endtime); 
 
    daysSpan.innerHTML = ('0' + t.days).slice(-2) 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 
 
    if (t.total <= 0) { 
      clearInterval(timeinterval); 
    } 
  } 
  if (daysSpan <= 0 && hoursSpan <= 0 && minutesSpan <= 0 && secondsSpan <= 0) { 
    document.alert('sdfsdf'); 
  } else { 
    updateClock(); 
    var timeinterval = setInterval(updateClock, 1000); 
  } 
}

<div class="stock text-center"> 
  Акция закончится через 
  <span id="clock"> 
								<span class="days"></span>:<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span> 
  </span> 
 
  <script> 
  </script>

Answer 1

Есть код на фидле, необходимо добавить всплывающее окно после завершения акции

Проверять внутри updateClock.

var deadline = new Date("2018, 7, 4 "); // добавьте чтобы проверить hh:mm:ss 
initializeClock('clock', deadline); 
 
function getTimeRemaining(endtime) { 
  var t = Date.parse(endtime) - Date.parse(new Date()); 
  var seconds = Math.floor((t / 1000) % 60); 
  var minutes = Math.floor((t / 1000 / 60) % 60); 
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24); 
  var days = Math.floor(t / (1000 * 60 * 60 * 24)); 
  return { 
    'total': t, 
    'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
  }; 
} 
 
function initializeClock(id, endtime) { 
  var clock = document.getElementById(id); 
  var daysSpan = clock.querySelector('.days'); 
  var hoursSpan = clock.querySelector('.hours'); 
  var minutesSpan = clock.querySelector('.minutes'); 
  var secondsSpan = clock.querySelector('.seconds'); 
 
  function updateClock() { 
    var t = getTimeRemaining(endtime); 
    //---------------------------------------------------------------- 
    // Акция всЁ 
    if (t.total < 0) { // Ended ..... 
      daysSpan.innerHTML = '00' 
      hoursSpan.innerHTML = '00'; 
      minutesSpan.innerHTML = '00'; 
      secondsSpan.innerHTML = '00'; 
      return; 
    } 
    daysSpan.innerHTML = ('0' + t.days).slice(-2) 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 
 
    if (t.total == 0) { // <------ Times is up 
      clearInterval(timeinterval); 
      alert('Times UP~'); 
    } 
  } 
  if (daysSpan <= 0 && hoursSpan <= 0 && minutesSpan <= 0 && secondsSpan <= 0) { 
    console.log('sdfsdf'); 
  } else { 
    updateClock(); 
    var timeinterval = setInterval(updateClock, 1000); 
  } 
}

<div class="stock text-center"> 
  Акция закончится через 
  <span id="clock"> 
<span class="days"></span>:<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span> 
  </span> 
</div>