time of day based div refresh - javascript

Hey, how do you refresh a div on a certain hour?
So the timed based greeting ticks over automatically.
the code I have at the moment is this:
<div id = "greet" ><script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours < 12)
document.write('Good morning.')
else if (hours >= 12 && hours < 18)
// (code in here?) refresh the div at 12:00 pm
document.write('Good afternoon.')
else if (hours >= 18 && hours <= 24)
// (code in here?) refresh div at 6:00 pm
document.write('Good evening.')
</script></div>
any tips would be great.
cheers.

are you need like this
var datas="";
var Digital=new Date()
var hours=Digital.getHours()
if (hours < 12){
datas = 12 ? "is a below 12am" : "";
document.write('Good morning.')
}
else if (hours >= 12 && hours < 18) {
datas = 12 ? "is a 12am" : "";
document.write('Good afternoon.')}
else if (hours >= 18 && hours <= 24){
datas = 18 ? "is a 6pm" : "";
document.write('Good evening.')
}
document.getElementById('greet').innerHTML=datas;
<div id = "greet" ></div>

Related

Javascript script for identifying multiple days of the week

I am not a javascript coder, but I need to modify this code so that I can have a status bar shown for multiple times during the week. How can I add to this statement to cover another day of the week or other times on Sunday? I need to have the bar show up Sunday from 5pm to 7pm and Thursday between 7p and 9p. Just wondered how I could modify this to work. Can someone help?
var d = new Date();
var Day = d.getDay();
var Time = d.getHours();
if (d.getDay() == 0 && d.getHours() >= 9 && d.getHours() <= 12) {
jQuery(".streaming").show();
} else {
jQuery(".streaming").hide();
}
First of all, you must understand how the Date's instance methods that you are using works. You can try it here getDay, and here getHours.
So, you code goes to something like:
var date = new Date();
var day = date.getDay();
var hour = date.getHours();
if ((day == 0 && hour >= 17 && hour <= 19) ||
(day == 5 && hour >= 19 && hour <= 21)) {
jQuery(".streaming").show();
} else {
jQuery(".streaming").hide();
}
You should take a look at the OR (||) operator in JavaScript too.
Thanks for the help. Based on your help I have modified it and also added a specific minute as well. Is this a proper way to do this or should I not be using get.Minutes?
var date = new Date();
var day = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
if ((day == 0 && hour >= 08 && minute >= 50 && hour <= 12) ||
(day == 0 && hour >= 16 && minute >= 50 && hour <= 19) ||
(day == 5 && hour >= 18 && minute >= 50 && hour <= 21)) {
jQuery(".streaming").show();
} else {
jQuery(".streaming").hide();
}
I would suggest you to refactor like this
if (showForDay(d)) {
jQuery(".streaming").show();
} else {
jQuery(".streaming").hide();
}
function showForDay(d){
// put all your conditions here
if (d.getDay() == 0 && d.getHours() >= 9 && d.getHours() <= 12) return true
if (d.getDay() == 0 && d.getHours() >= 12 && d.getHours() <= 14) return true
...
return false // will be hidden
}

Display Open/Close for Business Hours using pure javascript?

I'm trying to figure out how to make "open" display between 11:00 am to 8:30 pm (20:30) using only pure javascript for a local business. I can get it to work for 11:00 am to 8 pm (20:00) but I can't figure out how to get it to work for 20:30.
const paragraph = document.querySelector("#openClose");
let d = new Date();
let day = d.getDay();
let hours = d.getHours();
let minutes = d.getMinutes();
if (day === 5 && hours >= 11 && hours < 20) {
openClose.textContent = "Open."
} else {
openClose.textContent = "Closed."
}
//I tried, among other things:
if(day === 5 && hours >= 11 && hours < 20 && minutes < 30) {…
I read this stackoverflow article, but missed something, it didn't help me.
Think about what you're asking: you want it to work from 11 to 20 regardless of minutes, and then also work for 20 up to 30 minutes past. So that's two partitions of the hours, and one of the minutes, meaning you'll need two different terms in your condition.
if ((hours >= 11 && hours < 20) || (hours === 20 && minutes < 30)) { /* ... */ }
Change your if statement to:
if (day === 5 && ((hours >= 11 && hours < 20) || (hours === 20 && minutes < 30)))
Try with this
if(day === 5 && hours >= 11 && // this always matters
(
hours < 20 || // if it's less than 20 minutes don't matter
(hours === 20 && minutes < 30) // if it's 20 then minutes matter
)
)
As per the day
The getDay() method returns the day of the week (from 0 to 6) for the specified date.
Note: Sunday is 0, Monday is 1, and so on.

Time/hours syntax in JavaScript - how to do times that aren't on the hour

I'm using jQuery to show a different message depending on whether the business I work for is open or not. Since the business only opens at 9.30, I need to be able to write this into the jQuery but so far I've only been able to google things that specify times on the hour.
var thehours = new Date().getHours();
var themessage;
var open = ('nu open');
var gesloten = ('nu gesloten');
if (thehours >= 9.30 && thehours < 18) {
themessage = open;
} else if (thehours >= 18 && thehours < 24) {
themessage = gesloten;
} else if (thehours >= 0 && thehours < 9.30) {
themessage = gesloten;
}
$('.bericht').append(themessage);
var thehours1 = new Date().getHours();
var themessage1;
var open1 = ('09.30 - 18.00');
var gesloten1 = ('18.00 - 09.30');
if (thehours1 >= 9.30 && thehours1 < 18) {
themessage1 = open1;
} else if (thehours1 >= 18 && thehours1 < 24) {
themessage1 = gesloten1;
} else if (thehours1 >= 0 && thehours1 < 9.30) {
themessage1 = gesloten1;
}
$('.bericht1').append(themessage1);
These are two different messages that show either 'now open/now closed' and either the opening or closing times.
It works but only seems to show that's we're open between 10.00 and 18.00, not 9.30 and 18.00, so I wonder if the syntax on 9.30 is wrong.
A quick look at the docs for getHours would tell you that it returns the
... integer number, between 0 and 23, representing the hour for the given date according to local time.
So using 9.30 will never work (and if it did, you're using decimal numbers to represent that time - wouldn't it be 9.5?!)
So you need hours and minutes:
var date = new Date();
var hrs = date.getHours();
var mins = date.getMinutes();
if((hrs==9 && mins>30) || hrs >=10){
console.log("Its past 930am")
}
Putting this together with the rest of your logic gives:
function areWeOpen(){
var date = new Date();
var hrs = date.getHours();
var mins = date.getMinutes();
if(((hrs==9 && mins>30) || hrs >=10) && hrs<18){
return true;
}
return false;
}
console.log( areWeOpen() ? "We are open" : "We are closed");
Simple!
9.30 is a floating-point number (i.e. 9 and 3 tenths), not hours and minutes in your code.
Since getHours() returns integer number of full hours, your code will act similar to:
if (thehours1 >= 10 && thehours1 < 18) {
themessage1 = open1;
} else if (thehours1 >= 18 && thehours1 < 24) {
themessage1 = gesloten1;
} else if (thehours1 >= 0 && thehours1 < 9) {
themessage1 = gesloten1;
}
which will return unexpected results for time 09:00 - 10:00.
You need to manually check hours and minutes.
Something like this:
var thehours = new Date().getHours();
var theminutes = new Date().getMinutes();
var themessage;
var open = ('nu open');
var gesloten = ('nu gesloten');
if (thehours === 9 && theminutes >= 30) { // 09:30 - 10:00 open
themessage = open;
} else if (thehours >= 10 && thehours < 18) { // 10:00 - 18:00 open
themessage = open;
} else { // when we are not open - we are closed :)
themessage = gesloten;
}
$('.bericht').append(themessage);
You don't need to create conditions for non-working hours, you can just find working hours, and use else for non-working.
As alternative, you can use some sort of "minute of day" term since it is easier to compare them:
function getMinuteOfDay(hour, minute)
{
return hour * 60 + minute;
}
var now = new Date();
var nowMinuteOfDay = getMinuteOfDay(now.getHours(), now.getMinutes());
var isOpen = nowMinuteOfDay >= getMinuteOfDay(9, 30) && nowMinuteOfDay <= getMinuteOfDay(18, 00);
themessage1 = isOpen ? open1 : gesloten1;

Javascript time between 08:30 - 20:00

I am trying to make a message show between certain time ranges in a day but i cant make it work it either shows the first IF or doesnt show anything at all with an error i cant seem to figure out. what am i doing wrong?
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
if(today.getDay() == 4){
if(hour > 8 && minute > 30 || hour < 20){
document.getElementById('test').innerHTML = ('come today till 20:00');
} else if (hour > 20 && hour < 0){
document.getElementById('test').innerHTML = ('Come tomorrow till 20:00');
} else (hour > 0 && hour < 8).document.getElementById('test').innerHTML = ('Come today from 08:00 till 20:00');
}
figured it out thanks for the help guys :)
this is how it works now.
if(today.getDay() == 4){
if((hour === 8 && minute > 30 || hour > 8) && hour < 20){
document.getElementById('test').innerHTML = ('Kom vandaag langs in onze showtuin tot 20:00 uur donderdag');
} else if (hour >= 20 && hour < 24){
document.getElementById('test').innerHTML = ('Kom morgen langs in onze showtuin tot 20:00 uur');
} else{
document.getElementById('test').innerHTML = ('Kom vandaag langs in onze showtuin van 08:00 tot 20:00 donderdag');
}
}
You could simplify the conditions a bit, with checking from small values to greater values, like
if (today.getDay() == 4) {
if (hour < 8) {
document.getElementById('test').innerHTML = 'Come today from 08:00 till 20:00';
} else if (hour < 20) {
document.getElementById('test').innerHTML = 'Come today till 20:00';
} else if (hour < 24) {
document.getElementById('test').innerHTML = 'Come tomorrow till 20:00';
}
}
Working with absolute minute may become simplier:
var today = new Date();
var crtminut = ((today/60000).toFixed(0)-today.getTimezoneOffset())%1440;
var minmin = 8*60+30;
var minmax = 20*60;
if (today.getDay() == 4) {
if ((minmin <= crtminut) && (crtminut < minmax)) {
... inner period
} else {
... outer period
}
}
Each if can use the previous condition to its advantage which means if you correctly sort the conditions you can make it really simple:
if (hour >= 20) {
//20:00 - 23:59
}
else if (hour > 8) {
//9:00 - 19:59
}
else if (hour == 8 && minute >= 30) {
//8:30 - 8:59
}
else {
//0:00 - 8:29
}

get time back to 12 not 0

i have an if statement to change time back to 12 after it hits 11:45:
i = (i >= 192) ? i - 192 : ( i >= 96) ? i - 96 : i
var mins = (i * 15 % 60)
var hours = Math.floor(i * 15 / 60)
var ampm = (hours >= 12) ? "PM" : "AM"
hours = (hours == 0) ? 12 : (hours >= 12) ? hours - 12 : hours;
var nextMins, nextHours = hours;
switch (mins) {
case 0:
mins = "";
nextMins = 15;
break;
case 45:
nextMins = "";
nextHours = hours+1;
break;
default:
nextMins = mins + 15;
break;
}
var time = hours + (mins == "" ? "" : ":" + mins) + " - " + nextHours + (nextMins == "" ? "" : ":" + nextMins) + ampm
it changes in 15 minute intervals, the issue is it will start at 12 but after it gets to 12:00 again it will display as 0:15, 0:30, 0:45. Instead of 12:15, 12:30, 12:45
I thought this part of the if statement would do it:
hours = (hours == 0) ? 12
but isn't working?
The simplest way is probably
hours = (hours % 12) || 12;
This way copes with any positive integer for hours (eg. 36 will still return 12).
It should read
hours = (hours == 0) ? 12 : (hours > 12) ? hours - 12 : hours;
By having >= you're currently including 12 as a number to deduct 12 from.
hours = (hours == 0) ? 12 : hours;
is the complete usage of ternary conditional. But why don't you use a simple if statement?
if(hours == 0)
hours = 12;

Categories

Resources