0
votes

I have a countdown timer to hide the div then shows another div. i have done this by seconds well , but i want to convert the seconds to minutes and hours.

how can i do this?

pre thanks to anyone answers my question ...

this is my code:

var countDown = 9000;
var i = setInterval(function () {
  
  var b1 = document.getElementById('box1');
  var b2 = document.getElementById('box2');
  
  
  if(countDown === 1) {
    if(b1['style'].display == 'none') {
      b1['style'].display = 'block';
      b2['style'].display = 'none';
    } else {
      b1['style'].display = 'none';
      b2['style'].display = 'block';
    }
    clearInterval(i);
  }
  countDown--;
  b1.innerHTML = countDown;

}, 1000);
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="box1">9000</div>

    <div style="display:none" id="box2">div2</div>
    
  </body>

</html>
1
i want to show the countdown result just like hh:mm:ss instead of 9000 seconds ... - Moses Barok

1 Answers

1
votes

Example : https://jsfiddle.net/306qtxot/4/

You can use this Jquery:

var countDown = 9000;
var i = setInterval(function () {

  var b1 = document.getElementById('box1');
  var b2 = document.getElementById('box2');


  if(countDown === 1) {
    if(b1['style'].display == 'none') {
      b1['style'].display = 'block';
      b2['style'].display = 'none';
    } else {
      b1['style'].display = 'none';
      b2['style'].display = 'block';
    }
    clearInterval(i);
  }
  countDown--;

  //This section convert "seconds" to hour And minute And second 
  var hour=Math.floor(countDown/3600);
  var min=Math.floor(countDown%3600/60);
  var sec=Math.floor(countDown%3600%60);

  //Format : hh:mm:ss
  b1.innerHTML = (hour=hour<10?"0"+hour:hour) + " : " + (min=min<10?"0"+min:min) + " : " + (sec=sec<10?"0"+sec:sec);

}, 1000);