How to display a string only for a specific time using javascript?
I am currently creating a live banner for my school site. It must include the day of the week, date, time and current period number. I've sorted with the first three, but the last one is causing me problems as it only needs to be displayed for a 45 minute time frame. I have improved my code since yesterday. It now looks like this (CODEPEN) . By the way, thanks to everyone who helped me yesterday! Special thanks to theRoot for having a simple code
<!-->
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 now. Thank.
+3
source to share
1 answer
This way, you can have a reference about the start time for each period, and then map it to an array of periods. Here is an 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;
}
}
+1
source to share