Automatically add or remove div from page

StackOverflow https://stackoverflow.com/questions/21614571

Domanda

How can I make that there are always 7 divs(countdowns) on the page? I programmed this countdown for now there are just 2 of them but I will add around 30 more. How can I make that there are always 7 countdowns on the page.

Example: One countdown is finished and removed from the page automatically and another one is added to the bottom automatically.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<script>
var d = new Date();
var n = d.getDay();
if(n == 1 || 2 || 3 || 4 || 5){
var timer1;
function cdtd1() {
    var sad1 = new Date();
    var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),14,52,00);
    var timeDiff1 = dolazak1.getTime() - sad1.getTime();
    if (timeDiff1 <= 0) {
        clearInterval(timer1);
        $('#dani1Box').remove();
        $('#sati1Box').remove();
        $('#minute1Box').remove();
        $('#sekunde1Box').remove();


    }
    var sekunde1 = Math.floor(timeDiff1 / 1000);
    var minute1 = Math.floor(sekunde1 / 60);
    var sati1 = Math.floor(minute1 / 60);
    var dani1 = Math.floor(sati1 / 24);
    sati1 %= 24;
    minute1 %= 60;
    sekunde1 %= 60;

    $("#dani1Box").html(dani1);
    $("#sati1Box").html('7-Dubrava ' + sati1 + ':');
    $("#minute1Box").html(minute1 + ':');
    $("#sekunde1Box").html(sekunde1);

    timer1 = setTimeout(cdtd1, 1000);
}

$(document).ready(function() {
     cdtd1();
});

var timer2;
function cdtd2() {
    var sad2 = new Date();
    var dolazak2 = new Date(sad2.getFullYear(),sad2.getMonth(),sad2.getDate(),23,45,00);
    var timeDiff2 = dolazak2.getTime() - sad2.getTime();
    if (timeDiff2 <= 0) {
        clearInterval(timer2);
        $('#dani2Box').remove();
        $('#sati2Box').remove();
        $('#minute2Box').remove();
        $('#sekunde2Box').remove();

    }
    var sekunde2 = Math.floor(timeDiff2 / 1000);
    var minute2 = Math.floor(sekunde2 / 60);
    var sati2 = Math.floor(minute2 / 60);
    var dani2 = Math.floor(sati2 / 24);
    sati2 %= 24;
    minute2 %= 60;
    sekunde2 %= 60;
    $("#dani2Box").html(dani2);
    $("#sati2Box").html('6-Sopot ' + sati2 + ':');
    $("#minute2Box").html(minute2 + ':');
    $("#sekunde2Box").html(sekunde2);

    timer2 = setTimeout(cdtd2, 1000);
}

$(document).ready(function() {
     cdtd2();
});
}
</script>





<style type="text/css">
#dani1Box, #sati1Box, #minute1Box, #sekunde1Box, #dani2Box, #sati2Box, #minute2Box, #sekunde2Box{
         font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}







</style>
  <center>
    <div>
    <div id="sati1Box"></div>
    <div id="minute1Box"></div>
    <div id="sekunde1Box"></div>
    </div>

<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:15px;">&nbsp;</h1>

    <div>
    <div id="sati2Box"></div>
    <div id="minute2Box"></div>
    <div id="sekunde2Box"></div>
    </div>

   </center> 
</body>
È stato utile?

Soluzione

I can just recommend you such architect:

  1. Some array with options, that contains title and time of each countdown
  2. Only one function ctdt, that is running from setInterval (not setTimeout)
  3. Array with ids of intervals
  4. On document.ready run some function, which will analyze array with options, gets actual countdowns, which are not displayed on page yet and outputs as many items as needed.
  5. When some countdown is finished, you hide it and run the same to doc.ready function, which shows one more countdown, if its available.

It's more then just a question and it needs some time to realize, that's why I can't give you complete workni code, sorry.

Good luck!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top