LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Background based on time of day

JavaScript applies a CSS class to change the background image based on the time of day of the user's browser.

CSS
/*reset*/ h1,h4 {margin:0;}

/* basic styles */
h1 { margin-bottom: 10px; }
div { 
  width: 680px;
  padding: 10px 25px;
  margin: 50px auto;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.4); 
  color: #1F1F1F;
}

/* backgrounds */
.day { background: url('http://imgs.mi9.com/uploads/photography/4480/white-clouds-and-blue-sky_1600x1200_78556.jpg'); }
.sunset { background: url('http://www.naturewallpaper.eu/desktopwallpapers/sky/1366x768/after-sunset-sky-1366x768.jpg'); }
.night { background: url('http://images2.layoutsparks.com/1/159946/moon-girl-night-sky.jpg'); }
JS
$(document).ready(function(){
	var d = new Date();
	var n = d.getHours();
	if (n > 19 || n < 6)
	  // If time is after 7PM or before 6AM, apply night theme to ‘body’
	  document.body.className = "night";
	else if (n > 16 && n < 19)
	  // If time is between 4PM – 7PM sunset theme to ‘body’
	  document.body.className = "sunset";
	else
	  // Else use ‘day’ theme
	  document.body.className = "day";
});

Description

Change the background image based on the time of day of the user's browser using JavaScript
Term
Mon, 11/27/2017 - 21:31

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv