How Do I Change A Body Background Image Every Hour? - javascript

For my web design class we were instructed to do a one week exercise where we figure out how to take a creative approach to a clock that tells the time and temperature. This class is graded on creativity, I am allowed and encouraged to use plugins.
For my idea I think it would be interesting to change the background of my site every hour to match with the corresponding time. I have multiple images of a flower blooming and closing that I think would be interesting to correspond with the time of day.
What should I do to take what I already have and make it so that I can change the background image every hour? Is it something that should correspond with my existing javascript plugin clock, or is it a separate implementation entirely? Thanks in advance!
I don't want the image to change after a set interval, I want certain times in the day to correspond with the background image.
body {
background-color: black;
margin-left: 5%;
margin-right: 5%;
}
#txt {
color: white;
float: left;
font-family: OpenSans;
font-size: 90px;
margin: 20px;
}
#weather {
color: white;
float: right;
font-family: OpenSans;
font-size: 40px;
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Blooming Time And Temperature</title>
<link href="css/format.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
function startTime() {
document.getElementById('txt').innerHTML =
moment().format("hh:mm A");
var t = setTimeout(startTime, 1000);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<script>
$(document).ready(function() {
$.simpleWeather({
location: 'Brooklyn, NY',
woeid: '',
unit: 'f',
success: function(weather) {
html = '<p>'+weather.temp+'°'+weather.units.temp+'</p>';
html += '<div id="city">'+weather.city+', '+weather.region+'</div>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
<div id="weather"></div>
</body>
</html>

You need to get hour of the day on hourly basis. According to the hour, you can change background using jQuery:
$(document).ready(function() {
setInterval(function(){
var hour = new Date().getHours();
if(hour > 7 && hour <= 12)
{
// It's morning
$('body').css('background', 'url(url-to-image-one) no-repeat');
}
else if(hour > 12 && hour < 18)
{
// It's noon
$('body').css('background', 'url(url-to-image-two) no-repeat');
}
else
{
// It's night
$('body').css('background', 'url(url-to-image-three) no-repeat');
}
}, 1000 * 60 *60);
});

To keep this simple, you could setInterval(). Here's how it works: http://www.w3schools.com/jsref/met_win_setinterval.asp
What I would do is check the current time, then get the difference between now and the next hour (that is, if it was 10:30 and I wanted to know how much time was between 10:30 and 11), do a setTimeout() for that amount of time in milliseconds, and then call a function that begins the setInterval() function that will be called every hour.
Hope this helps!

this is a code from John duckett's javascript and jquery book
var today= new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting= 'Good evening!';
else if (hourNow > 12) {
greeting = ' Good afternoon!';
else if (hourNow > 0) {
greeting = 'Good morni ng!';
else {
greeting = 'Welcome! ' ;
}
document .write( ' <h3>' +greeting + ' </ h3> ');
the value of the variable greeting is change base on the if condition. See Date and getHours() method

Related

How can I make a 10 second countdown timer before a download button link appears for blogspot in Html?

On a download page, I would like to have it so that when the page loads, a 10 second timer automatically starts. On the page, I would like some text to say something like "You can begin your download in 10 seconds..." Then, after the time is up a download button appears for people to click on and start their download.
How can I do this, and what code do I use to include it into a page?
Ciao, you could use a setInterval and then when time is expired, show a button like this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<input id="button" type="button" onclick="location.href='https://google.com';" value="DOWNLOAD" />
<script>
// Set the date we're counting down to
var countDownDate = new Date().setSeconds(new Date().getSeconds() + 10);
document.getElementById("button").style.visibility = "hidden";
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = "You can begin your download in " + seconds +" seconds...";
// If the count down is over, write some text and show button to download
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Click DOWNLOAD button";
document.getElementById("button").style.visibility = "visible";
}
}, 1000);
function startDownload() {
// here start the download
}
</script>
</body>
</html>
Well the download part itself has to be worked out with a server, but assuming you have the direct URL of the file, you can set it to an a tag with a download attribute, then for the countdown just use setTimeout for one second set s time, incrementing a variable each time and if it's greater than 9 then call .click() on the a tag to download it
Assuming there is already Div in the page with I'd "counter",
var a=document. createElement ("a")
a.href="direct URL of file goes here"
a.download="file name plus the extension.txt"
var currentSecond=0
function second () {
setTimeout(function () {
currentSecond++
counter. innerHTML= (10-currentSecond)+" seconds to go before download starts automatically"
if(currentSecond > 9)
a.click()
else second ()
}, 1000)
}
second ()
Something like this
<div>
<div id="countdown"></div>
<button type="button">Download</button>
</div>
<script type="text/javascript">
var time = 10;
var interval = setInterval(() => {
time--;
if (time <= 0) {
document.getElementById("countdown").style.display = "none";
document.getElementById("download").style.display = "block";
clearInterval(interval);
} else {
document.getElementById("countdown").innerText = "You can begin your download in" + time + "seconds..."
}
}, 1000);
</script>

Changing section background based on time

The first section of my website contains a picture. I want the picture to change based on the local time. For example between 6 AM until 6 PM the "day picture" will be shown, and the rest of the time the "night picture" will be shown. I have two classes in my CSS file one called Day the other Night:
.day {
background-image: url("./css/images/daymode.jpg");
background-size: cover;
}
.night {
background-image: url("./css/images/nightmode.jpg");
background-size: cover;
}
this is the HTML section I would like to change its the background:
<section class="home-section section-hero overlay slanted" id="home-section">
that's my JavaScript file:
$(document).ready(function() {
var d = new Date();
var n = d.getHours();
if (n > 18 || n < 6)
// If time is after 7PM or before 6AM, apply night theme to ‘body’
document.body.className = "night";
if (n > 6 && n < 18) document.body.className = "day";
});
I can't figure out how to put these day and night classes in the same class of the section element so it will recognize them and I can control it with the js file.
Any help will be appreciated! :)
You are close, but if you want to target only changing the background on your section, then you need to change the CSS selectors slightly. While you CAN have both a 'day' and 'night' class, it is easier to just have a default, and then an overridden 'night' theme.
Since you are already using $(document).ready, I'll assume you have jQuery included, so I've modified your function to take advantage of this and preserving whatever additional classes may have already been present on the body.
$(document).ready(function() {
$('body').toggleClass('night',IsNight());
setInterval(function(){
$('body').toggleClass('night',IsNight());
},60000);
});
function IsNight()
{
var d = new Date();
var n = d.getHours();
return (n >= 18 || n < 6);
}
#home-section {
background-image: url("./css/images/daymode.jpg");
background-size: cover;
}
.night #home-section {
background-image: url("./css/images/nightmode.jpg");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-section section-hero overlay slanted" id="home-section">blah</section>
Here is the same thing, slightly modified so that you don't have to wait for day/night. This changes every second instead and uses color instead of background-iamge.
$(document).ready(function() {
setInterval(function(){
$('body').toggleClass('night');
},1000);
});
#home-section {
background-image: url("./css/images/daymode.jpg");
background-size: cover;
color: yellow;
}
.night #home-section {
background-image: url("./css/images/nightmode.jpg");
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-section section-hero overlay slanted" id="home-section">blah</section>
You can use if{..}else{..}
for you understanding i have set the time of day you can comment it and set it to current time
var d = new Date('Thu Feb 20 2020 07:35:09 GMT+0530 ');
//var d = new Date();
var n = d.getHours();
if (n > 18 || n < 6) {
// If time is after 7PM or before 6AM, apply night theme to ‘body’
document.body.className = "night";
} else {
document.body.className = "day";
}
.day {
background-image: url("./css/images/daymode.jpg");
background-size: cover;
background-color: orange;
}
.night {
background-image: url("./css/images/nightmode.jpg");
background-size: cover;
background-color: black;
}
Since you have an ID on your section element, you can more easily do:
var section = document.getElementById('home-section');
var period;
// your logic to define whether it's day or night, and it's set to 'period'
// then, remove previous set classes
section.classList.remove('day');
section.classList.remove('night');
// finally, set the recently defined period
section.classList.add(period);
This way, since both of your day and night classes share the background-size: cover property, you can move it into your styles for the #home-section css rules.

How do I write a monthly HTML alert that shows relative to the user's timezone

Show an alert in a browser on the whole 24 hour period of a set time frame and show it for the same 24 hour period of a set timezone no matter what the user's timezone is.
Then show the period relative to the user's timezone
I spent quite a bit of time figuring this out and wanted to post my results to help someone.
http://jsfiddle.net/y7uLtwno
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js"></script>
<script>
// Goal: Show a maintenance alert on a webpage that lasts for the 24 hour period relative to a set time zone and then show the alert with the maintenance period relative to the browser's timezone
// Variables: You must set the static timezone relative to where the maintenance is happening
// Scnario: Your server is in one timezone and scheduled maintenance happens every month, and you want to alert users worldwide in their timezone for the whole day
// Author: Joshua Wyss
//MUST use .ready to account for the way that Confluence loads the side-bar. Without it the sidebar loads after the alert and makes the sidebar overlap the header until the user scrolls.
function showHide() {
// Grab the alert div "s" and the text inside the div "h"
var s = document.getElementById(4);
var h = document.getElementById(5);
// *** SET THESE VARIABLES *** //
// Set location to ISO timezone
var location = 'America/Chicago';
// 24 hr format for start and end of maintnenace relative to above timezone. To use 12 hr format change variables t1 and t2 format to 'hh:mm a' the use the "hh:mm am/pm" see: http://momentjs.com/docs
var maintStart = '18:00';
var maintEnd = '20:00';
//For weekOfMonth # should be the number week of the month (starting at 1)
var weekOfMonth = 4;
//For dayOfWeek # is >> 0=Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat
var dayOfWeek = 1;
// *** SET THESE VARIABLES *** //
//set d to current time in United States Central Time
var d = moment(moment().utc().format()).tz(location);
// Get "location" day of month number (example: 22 or 01)
var centDateNum = d.format('DD').toString();
// Get "location" day of week number
var centDayOfWeek = d.format('e').toString();
// Check if "location" today matches weekOfMonth and dayOfWeek specified
if (Math.ceil(centDateNum / 7) == weekOfMonth && centDayOfWeek == dayOfWeek) {
// Show the HTML alert
s.style.display = (s.style.display == 'block') ? 'none' : 'block';
// Convert start time to local
var t1 = moment.tz(maintStart, 'HH:mm', location).local().toDate();
// Convert end time to local
var t2 = moment.tz(maintEnd, 'HH:mm', location).local().toDate();
// Add start and end time to the HTML alert. TO modify formatting see: http://momentjs.com/docs/#/displaying/format/
h.innerHTML += " " + moment(t1).format('dddd') + " " + moment(t1).format('HH:mm') + "-" + moment(t2).format('HH:mm');
}
}
</script>
<div id="4" style="display:none; background-color: linen; border: 3px solid darkred; margin: 2px; padding: 2px; font-weight: bold; text-align: center;">
<h3 id="5">Monthly maintenance scheduled this </h3>
</div>
<body onload="showHide()">

Changing background image based on local time

I've been trying to figure this out for over 4 hours, none of the questions (that have already been answered) in stack work for me, here's the code:
<html>
<head>
<style>
.day {
background-image: url(test2.png);
}
.night {
background-image: url(test.png);
}
</style>
</head>
<body class="day" class="night">
<script>
setInterval(function() {
var d = new Date();
var n = d.getHours();
if (n > 23 || n < 6) {
document.body.className = "night";
} else {
document.body.className = "day";
}
console.log("test");
}, 1000 * 60 * 60);
</script>
</body>
</html>
I want the night background to be from 11PM to 7AM, and the rest of the time for the day background.
As you might see, those test.png pictures are changed instead of original so you don't see the pictures I want, since they contain minor gore, feel free to put your own test images in them.
Your logic is perfect and works as intended (I changed the images to colours, because StackOverflow gave an error when I tried your snippet).
The only problem (to you a problem, to others a design feature) is that setInterval starts after the first interval is complete. In other words; you had to wait an hour to see the results.
In my fix I moved the JavaScript to a separate function, which is mentioned by the setInterval and after that immediately called.
I also removed the double classes on the body, because that will be set by the function.
Edit: I forgot to mention that a double class (day and night) can occur with this code. You should write some logic to remove day when night is applied and vice versa.
Edit2: I changed the equation for the time a bit. n can't be bigger than 23, but it can be 23. Also, you wanted to change it to day around 7, which includes 6. So your equation should be right.
As user Salman A states, you should decrease the interval. If a user starts browsing your site at 6:58 and stayed one a single page for an hour (I don't know the business of your website, but that's quite long), the background would change around 7:58. So decrease your interval to something like 1 or 2 minutes (1000 * 60 * 1 or 1000 * 60 * 2).
<html>
<head>
<style>
.day {
background-color: #ccc;
}
.night {
background-color: #333;
}
</style>
</head>
<body>
<script>
setInterval(change_background, 1000 * 60 * 60);
function change_background() {
var d = new Date();
var n = d.getHours();
console.log(n);
if (n == 23 || n < 7) {
document.body.className = "night";
} else {
document.body.className = "day";
}
console.log("test");
}
change_background();
</script>
</body>
</html>

How can I control a progress element using JavaScript for Loading visualization?

I need help with adding a loader to my HTML document. Here's the page without the loader:
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body bgcolor="#FFFFFF">
<script>
/*
Script goes here for the loader.
I think I might have an idea, I could use the "load" event.
*/
</script>
<style>
h1 {
color: green;
font: 24px Courier;
}
.css-format-class {
color: red;
font: 16px Arial;
}
</style>
<center>
<h1>My Simple Webpage</h1>
</center>
<br>
<p class="css-format-class">I wish I could add a loader GIF onto this page...</p>
<!--I need a loader somewhere in this webpage...-->
<!--If you know the solution, please feel free to comment.-->
</body>
</html>
I found this bit of code in HTML5, but don't know how to make JavaScript manipulate this tag:
<progress id="loader" value="0" max="100"></progress>
If you know how, let me know.
Get a reference to the progress element (e.g. using document.getElementById()) and then update the value property, which maps to the attribute of the same name. See the snippet below for a demonstration, where setInterval() is used to call a function every second to update the value.
The code below waits until the DOM is ready by adding an event listener (using document.addEventListener()) to add a callback when the event DOMContentLoaded happens. That way it doesn't try to access elements in the DOM (e.g. the progress element) before it is ready.
var progress, date, interval;
// wait until DOM has been loaded to perform DOM Manipulations
document.addEventListener('DOMContentLoaded', function() {
date = Date.now(); //current timestamp since UNIX epoch
//get a reference to the progress element using its id attribute
progress = document.getElementById('loader');
interval = setInterval(updateProgress, 1000);
});
function updateProgress() {
msg.innerHTML = 'begin updateProgress() - progress.value = '+progress.value + "<br>" + msg.innerHTML;
if (progress.value >= 100) {
//stop running this function after value reaches 100 (percent)
clearInterval(interval);
}
var newDate = Date.now();
var milliseconds = newDate - date;
var seconds = Math.floor(milliseconds / 1000);
loader.value += seconds;
}
<progress id="loader" value="15" max="100"></progress>
<div id="msg" style="max-height:100px;overflow-y: auto"></div>

Categories