Why the background color dont change? - javascript

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();

Related

Javascript time condition between 11:40 AM and 12:20PM (11:40 < 12:20)

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";
}

Conditional statement not functioning properly

Depending on the time of the day. I am trying to display Morning, Afternoon or Evening to the user using the JavaScript ( new Date() ) method. But what I am receiving in response is just the (else) statement. Can I get advice as to what I am doing incorrectly?
const mainHeader = document.getElementById("header");
var greetings = () => {
var today = new Date();
}
window.onload= (e) => {
greetings;
if(today >= 1 && today < 12) {
mainHeader.innerHTML = "<h3>Good Morning! And Welcome To Guess The Number</h3>"
console.log("Morning: between 1 and 12");
} else if(today >= 12 && today < 17) {
mainHeader.innerHTML = "<h3>Good Afternoon! And Welcome To Guess The Number</h3>"
console.log("Afternoon: between 12 and 17");
} else if(today >= 17 && today <= 24) {
mainHeader.innerHTML = "<h3>Good Evening! And Welcome To Guess The Number</h3>"
console.log("Evening: between 17 and 24");
} else {
mainHeader.innerHTML = "<h3>Welcome to Guess The Number</h3>"
console.log("No time zone");
}
}
You need to return the hour from greetings(), and then assign it to a variable in the window.onload function.
const mainHeader = document.getElementById("header");
var greetings = () => {
var today = new Date();
return today.getHours();
}
window.onload = (e) => {
var today = greetings()
if (today >= 1 && today < 12) {
mainHeader.innerHTML = "<h3>Good Morning! And Welcome To Guess The Number</h3>"
console.log("Morning: between 1 and 12");
} else if (today >= 12 && today < 17) {
mainHeader.innerHTML = "<h3>Good Afternoon! And Welcome To Guess The Number</h3>"
console.log("Afternoon: between 12 and 17");
} else if (today >= 17 && today <= 24) {
mainHeader.innerHTML = "<h3>Good Evening! And Welcome To Guess The Number</h3>"
console.log("Evening: between 17 and 24");
} else {
mainHeader.innerHTML = "<h3>Welcome to Guess The Number</h3>"
console.log("No time zone");
}
}
<div id="header">
</div>
You never define today in the onload function(even if you called greeting, today wouldn't be defined b/c var is function scoped). Instead replace greetings; with var today = new Date().getHours(); and remove the greetings function.
If you still want to keep greetings as a function, you can replace it with var greetings = ()=>new Date().getHours(); and replace greetings; with var today= greeting();

Change CSS of HTML on computer timing

I have three CSS with me in one HTML, morning.css, evening.css & night.css..
My requirement is that, once visitor visits the website, the css should change according to visitor PC timing...
Morning.css --> 6.00hrs - 15.00hrs
Evening.css --> 15.00hrs - 19.00 hrs
Night.css --> 19.00hrs - 6.00hrs
Can anyone help me with this..??? My requirement is on load not on button click
You can write a function which will set the class to body like the following:
function setTimingClass() {
var hour = new Date().getHours();
var cls;
if (hour >= 6 && hour <= 14) {
cls = 'morning';
} else if (hour >= 15 && hour <= 18) {
cls = 'evening';
} else {
cls = 'night';
}
document.body.className = document.body.className + ' ' + cls;
}
And call the function on body's onload. And then use this classes in your css file to style accordingly
You can use for example function like this:
function applyClass(){
var date = new Date();
var hour = date.getHours();
if(hour >= 6 && hour < 15) {
// apply 'morning' class to body
} else if(hour >= 15 && hour < 19) {
// apply 'evening' class to body
} else {
// apply 'night' class to body
}
}
How to append class to DOM element you can easily find on another thread of stackoverflow
With this function you can check time and class to the dom element
(function(){
var currentdate = new Date();
var datetime = currentdate.getHours();
if(datetime >=6 && datetime<15){
// moning class
}
else if(datetime >=15 && datetime<19){
// evening classes
}
else{
// night class
}
alert(datetime)
}());
jsfiddle
You need to use JS or any other programming language like php to achieve this.
For me easiest way will be loading all 3 scripts and adding class to body depands on hour.
<script>
window.onload = function(){
var d = new Date();
var h = d.getHours();
if(h >= 6 && <= 15) {
document.body.setAttribute('class','morning');
}
}
</script>

Javascript check if the time is between 8:30am and 6:30pm

Ok so what the title says. I am doing this on a server, so I get the server's time using some PHP code. The problem is that it is a time frame without exact round hour values. Should I use nested if else statements?
var serverTimestampMillis = <?php print time() * 1000 ?>;
var checkInterval = 1000;
var checkTime = function () {
serverTimestampMillis += checkInterval;
var now = new Date(serverTimestampMillis);
var timeDiv = document.getElementById('timeDiv');
var messageDiv = document.getElementById('messageDiv');
timeDiv.innerHTML = now.toString();
var dayOfWeek = now.getDay(); // 0 = Sunday, 1 = Monday, ... 6 = Saturday
var hour = now.getHours(); // 0 = 12am, 1 = 1am, ... 18 = 6pm
var minutes = now.getMinutes();
// check if it's Monday to Thursday between 8:30am and 6:30pm
// this is where I don't know how to check 8:30
if (dayOfWeek > 0 && dayOfWeek < 5 && hour > 8 && hour < 18) {
messageDiv.innerHTML = 'Yes, we are open!';
messageDiv.className='open';
}
else {
messageDiv.innerHTML = 'Sorry, we\'re closed!';
messageDiv.className='closed';
}
};
// check the time every 1000 milliseconds
setInterval(checkTime, checkInterval);
checkTime();
thank you in advance, and sorry for being a noob
Compare between two dates using a helper function:
function createDateTime(time) {
var splitted = time.split(':');
if (splitted.length != 2) return undefined;
var date = new Date();
date.setHours(parseInt(splitted[0], 10));
date.setMinutes(parseInt(splitted[1], 10));
date.setSeconds(0);
return date;
}
var startDate = createDateTime("8:30");
var endDate = createDateTime("17:30");
var now = new Date();
var isBetween = startDate <= now && now <= endDate;
console.log(isBetween);
JSFIDDLE.
You can just nest your statements, like you said (to make it easier to read), and then check the specific edge cases (8:30-9 and 18:00-18:30).
if (dayOfWeek > 0 && dayOfWeek < 5) {
if ((hour > 8 && hour < 18) ||
(hour == 8 && minutes >= 30) ||
(hour == 18 && minutes <= 30)) {
messageDiv.innerHTML = 'Yes, we are open!';
messageDiv.className='open';
}
}

stop refresh of page between hours

I have an issue where I want to check the time and do something based on it. For example, from 12 midnight to 1 am, I would like to stop the page from refreshing. How would I accomplish this?
function RefreshPage()
{
if (refresh == 'Y')
{
CheckAndStopAutoRefresh();
}
}
function CheckAndStopAutoRefresh()
{
var d = new Date();
var currentHour = d.getHours(); // 0-23
if (currentHour >= 0 && currentHour < 1)
{
return;
}
else
{
window.location=window.location; // refresh
}
}
//initialize date object
var d = new Date();
var currentHour = d.getHours(); //note 0-23
//you could use currentHour == 0 but this expression allows for a range
if (currentHour >= 0 && currentHour < 1)
{
console.log('between 0:00 and 1:00 hrs');
}
else { console.log('after 1am'); }
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date provides and overview of the date object
I am not too sure what you mean by 'stop refresh' I do not believe it possible to disable refresh/F5, but perhaps if you modify your question or specify your intentions I can take another stab at the question.
EDITED
--edited to reflect updated question.
I would use setInterval(code,millisec,lang)
function CheckAndStopAutoRefresh() {
//initialize date object
var d = new Date();
var currentHour = d.getHours(); //note 0-23
//you could use currentHour == 0 but this expression allows for a range
if (currentHour >= 0 && currentHour < 1)
{
console.log('between 0:00 and 1:00 hrs');
}
else { console.log('after 1am'); }
}
setInterval(CheckAndStopAutoRefresh,60000); //60,000 milliseconds in a minute

Categories