how to display a string only during a specific time with javascript?

Question

I am currently making a live banner for my school website. It should include the day of the week, the date, the time, and the current period number. I'm sorted with the first three but the last one gives me trouble as it needs to be displayed only during a 45 minute period of time. I improved my code from yesterday. Now it looks like this (CODEPEN). BTW, Thanks to all who have helped me yesterday too! Special thanks to theRoot, for making me have my code simple

<!-->
LIVE DATE AND DAY
<-->
    <style>
        BODY {
            font-family: arial;
        }
    </style>
    <body onload="startTime()">
        <p>
            <span style="font-size:40pt;">TODAY IS A
                <script>
                    var today = new Date();
                    var dd = today.getDate();
                    var ww = today.getDay();
                    var mm = today.getMonth();
                    var yyyy = today.getFullYear();
                    var suffix = ["st","nd","rd","th"];
                    var op = "";
                    var month = ["JANUARY","FEBUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
                    var day = ["MONDAY","TUESDAY","WEDNSDAY","THURSDAY","FRIDAY","SATURDAY","SUNDAY"];

                    if(parseInt(dd) > 4)
                        op+=" "+day[ww-1]+" THE "+dd+suffix[3].sup()+" OF ";
                    else
                        op+=" "+day[ww-1]+" THE "+dd+suffix[(parseInt(dd)%10)-1].sup()+" OF ";
                    op+=month[parseInt(mm)-1]+" "+yyyy;
                    document.write(op);
                </script>

                <script>
                    function startTime() {
                        var today=new Date();
                        var h=today.getHours();
                        var m=today.getMinutes();
                        m = checkTime(m);
                        var am = " am";  
                        var pm = " pm";

                        if(h > 12) {
                            h =(h - 12)
                            document.getElementById('time').innerHTML = h+":"+m+pm.sup();
                        } else {
                            document.getElementById('time').innerHTML = h+":"+m+am.sup();
                        }

                        var t = setTimeout(function(){startTime()},500);

                        var period = ["WHY SO EARLY?","BEFORE SCHOOL","PERIOD 1","PERIOD 2","PERIOD 3","PERIOD 4","PERIOD 5","PERIOD 6","PERIOD 7","PERIOD 8","PERIOD 9","PERIOD 10","AFTER SCHOOL","WHY ARE STILL YOU HERE?",];
                    }

                    function checkTime(i) {
                        if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
                        return i;
                    }
                </script>
               <p style="font-size:40pt; display:inline;" id="time"></p>
            </span>
        </p>
    </body>

This is what I have as of now. Thanks.

You cannot mix HTML code and JavaScript. Check your start and end ` — Anwar, Jul 01 '15 at 12:39
What do you mean you cannot mix HTML code and javascript @Zeratops? — Emre Türkiş, Jul 01 '15 at 13:26
I warn the OP about the integrity of the tags before @Andrei Zhamoida corrects his code. — Anwar, Jul 01 '15 at 13:33

score 1 · Accepted Answer · answered Jul 01 '15 at 13:51

So you can have a reference about start time for each period and then map it accordingly with period array.Here is a updated fork http://codepen.io/anon/pen/eNVdRq

var per=h*60+m;
for(var i=0;i<ptime.length-1;i++){
  if(per>ptime[i]&&per<ptime[i+1]){
    document.getElementById('period').innerHTML=period[i];
    break;
  }
}

how to display a string only during a specific time with javascript?

1 Answers1