I am using React to create online food ordering and I need to disable the ordering when the restaurant is closed, until it opens again.
something like this:
const time = new Date().toLocaleTimeString("rs-RS");
const day = new Date().getDay();
if (day <= 5 && time < "08:00:00" && time > "23:30:00") {
console.log("closed");
} else if (day === 6 && time < "09:00:00" && time > "23:30:00") {
console.log("closed");
} else if (day === 0 && time < "12:00:00" && time > "20:00:00") {
console.log("closed");
} else {
console.log("open");
}
Thanks.
You can't compare a Date with a String. I would use Date.setHours():
const time = new Date();
const day = new Date().getDay();
if ((day <= 5) && (time < (new Date().setHours(8)) && (time > (new Date().setHours(23, 30))) {
console.log("closed");
} else if ((day === 6) && (time < (new Date().setHours(9)) && (time > (new Date().setHours(23, 30))) {
console.log("closed");
} else if ((day === 0) && (time < (new Date().setHours(12)) && (time > (new Date().setHours(20))) {
console.log("closed");
} else {
console.log("open");
}
Related
I tried the code below but it didn't work.
var hour = new Date().getHours();
var min = new Date().getMinutes();
if (hour >= 11 && hour <= 12 && min < 40 && min > 20) {
document.body.style.background = "green";
} else {
document.body.style.background = "red";
}
you had three problems here:
the extra } at the end
hours is not defined. I changed it to hour, which is defined
'=>': this is not necessary for the hours. since you are only checking two hours (11 and 12), it's much simpler to check each hour and it's minuets separately.
var hour = new Date().getHours();
var min = new Date().getMinutes();
if((hour == 11 && min >40) || hour == 12 && min < 20) {
document.body.style.background = "red";
} else {
document.body.style.background = "green";
}
This is just for this example.
var hour = new Date().getHours();
var min = new Date().getMinutes();
if (hour >= 11 && hour <= 12 && (hour === 11 ? min > 40 : min < 20)) {
document.body.style.background = "red";
} else {
document.body.style.background = "green";
}
You can use the javascript Date object and compare with the Date object between start time, end time and current time.
const date1 = new Date();
date1.setHours(11);
date1.setMinutes(40);
const date2 = new Date();
date2.setHours(12);
date2.setMinutes(20);
const today = new Date();
if (today >= date1 && today <= date2) {
document.body.style.background = "red";
} else {
document.body.style.background = "green";
}
Your logic had some problems so I fixed them. This will change background to red if between the hours of 11:40 AM and 12:20 PM (inclusive):
var hour = (new Date()).getHours();
var min = (new Date()).getMinutes();
if (hour == 11 && min >= 40 || hour == 12 && min <= 20) {
document.body.style.background = "red";
} else {
document.body.style.background = "green";
}
Hello i want to change the body Background color on specific time with JavaScript but the code don't seems to work! Why?
function changebg(){
var date= new Date().getHours();
if(date >= 21 && date <=6){
document.body.style.backgroundColor="black";
}
}
changebg();
Probably you can try with date >= 21 || date <= 6 instead.
changeBackground();
function changeBackground() {
const currentHour = new Date().getHours();
if(currentHour >= 21 || currentHour <= 6) {
//document.body.style.backgroundColor="black";
console.log('now you can change the color here for night');
} else {
console.log('default color');
}
}
Try this :
function changebg(){
var date= new Date().getHours();
if(date >= 9 || date <=6 ){
document.body.style.backgroundColor="black";
}else{
//
}
}
changebg();
You are probably want something like this:
function changebg(){
var hour = new Date().getHours();
if (hour >= 21 || hour <= 6) {
document.body.style.backgroundColor="black";
}else{
// todo
}
}
changebg();
I am sure that this has been raised many times, but I can't find a solution. I need to change an image every month, using javascript, and the closest thing I've found is:
THIS DEMO
But my code does not work, although all the images I call from my server and are located in the folder "img".
The script only shows the first image (of the HTML) but does not execute the others
What am I doing wrong here?
Thanks in advance!
HTML:
<img id="logo" src="http://example.com/img/Master.jpg" onload="logo(this)">
Script
function logo(img) {
if (img.src.indexOf('default')==-1) return; // already changed
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src = "http://example.com/img/";
if (Month === 0 && (Today >= 1 && Today <= 29)) {
src += "000.jpg";
} else if (Month === 1 && (Today >= 1 && Today <= 29)) {
src += "001.jpg";
} else if (Month === 2 && (Today >= 1 && Today <= 29)) {
src += "002.jpg";
} else if (Month === 3 && (Today >= 1 && Today <= 29)) {
src += "003.jpg";
// code for 4
// code for 5
// code for 6 ...
}
alert(src);
img.src=src;
}
Because in the demo on js-fiddle there is a default image named 'default.png' ur default image is named: 'Master.jpg'. Then in the logo-function you are testing if the current src still contains the word 'default': if(img.src.indexOf('default')==-1) return; ... u need to either name your default picture also from 'Master' to 'default' or you change the if condition according to your data.
EDIT
OK try to follow my example its almost the same as yours just i use sample pictures from placehold.it:
function logo(img) {
if (img.src.indexOf('default')==-1) return; // already changed
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src = "https://via.placeholder.com/150";
if (Month === 0 && (Today >= 1 && Today <= 29)) {
src += "?text=000.jpg";
} else if (Month === 1 && (Today >= 1 && Today <= 29)) {
src += "?text=001.jpg";
} else if (Month === 2 && (Today >= 1 && Today <= 29)) {
src += "?text=002.jpg";
} else if (Month === 3 && (Today >= 1 && Today <= 29)) {
src += "?text=003.jpg";
// code for 4
// code for 5
// code for 6 ...
} else if (Month === 9 && (Today >= 1 && Today <= 29)) {
src += "?text=009.jpg";
}
alert(src);
img.src=src;
}
<img src="https://via.placeholder.com/150?text=default.jpg" onload="logo(this)" />
Especially note that the initial image-src contains the word 'default'. Play around with that and then try to apply it to your use-case.
Why not simplify it?
function logo(img) {
var Month = d.getMonth();
var src = "http://example.com/img/";
if (Month == 0) {
src += "000.jpg";
} else if (Month == 1) {
src += "001.jpg";
} else if (Month == 2) {
src += "002.jpg";
} else if (Month == 3) {
src += "003.jpg";
// code for 4
// code for 5
// code for 6 ...
}
alert(src);
img.src = src;
}
I have created this to check if time is between 17:00 / 23:00.
This works fine! But now I want to check if its weekend.
Can you help me?
var objDate = new Date();
var hours = objDate.getHours();
if (hours >= 17 && hours <= 23) {
document.write('<!--test1 -->');
}
else {
document.write('<!--test2 -->');
}
Use the getDay() method of the Date object (0 corresponds to Sunday and 6 to Saturday):
<script language="javascript">
var objDate = new Date();
var hours = objDate.getHours(),
dayOfWeek = objDate.getDay();
if(hours >= 17 && hours <= 23 && (dayOfWeek == 6 || dayOfWeek == 0)){
document.write('<!--test1 -->');
} else {
document.write('<!--test2 -->');
}
</script>
var objDate = new Date();
var hours = objDate.getHours();
var n = objDate.getDay();
if(hours >= 17 && hours <= 23){
alert('<!--test1 -->');
}
else{
alert('<!--test2 -->');
}
if(n == 0 || n == 6)
{
alert('Weekend');
}
else
{
alert('Weekday');
}
I'm looking to load different css files according to the date (season).
I tried modifying an image script from here on stackoverflow, but that didn't work.
Can anybody point me out where it goes wrong?
<link href="/css_season/default.css" rel="stylesheet" type="text/css" onload="logo(this)">
function logo(link) {
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src;
if (Month === 4 && (Today >= 1 && Today <= 30)) {
src = "/css_season/easter.css";
} else if (Month === 7 && (Today >= 1 && Today <= 31)) {
src = "/css_season/vacation.css";
} else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2)) {
src = "/css_season/vacation.css";
} else if (Month === 12 && (Today >= 15 && Today <= 31)) {
src = "/css_season/holidays.css";
}
link.href=href;
}
Your assignment link.href=href won't work because href isn't defined. Also, I would put the logo function in <body onload="logo();"> and give your link tag an id attribute.
This should work for you:
<html>
<head>
<link id="cssId" href="/css_season/default.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="logo();">
<!-- body content here -->
</body>
function logo() {
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src;
if (Month === 4 && (Today >= 1 && Today <= 30))
src = "/css_season/easter.css";
else if (Month === 7 && (Today >= 1 && Today <= 31))
src = "/css_season/vacation.css";
else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2))
src = "/css_season/vacation.css";
else if (Month === 12 && (Today >= 15 && Today <= 31))
src = "/css_season/holidays.css";
document.getElementById('cssId').href=src;
}
You have wrong assignment at the end of the js function.
link.href=href; should be link.href = src;
Cheers