javascript - Changing a background image of <body> (in CSS) depending on the season (Current Calendar Month) -


i'd change html background depending on date, i've written isn't working properly. can't find applicable examples , i'm struggling complete it.

i want start of new season change background of html page altering image used in css file.

javascript:

var d = new date(); var day = d.getdate(); var month = d.getmonth(); if (month == <3 && month == 5) {     document.background-image: url("springtree.jpg"); } else if (month == < 6 && month == > 8) {     document.background-image: url("summertree.jpg"); } else if (month == < 9 && month == > 11) {     document.background-image: url("autumntree.jpg"); } else (month == 12 && month == > 2) {     document.background-image: url("wintertree.jpg"); 

css:

div.body {   background-image: url("summertree.jpg");     width: 640px;     height: 1136px;     background-repeat: no-repeat;     background-attachment: fixed;     background-position: center;     background-size: cover; } 

i'm not sure if accomplished jquery i'm willing experiment anything.

as can see have no clue i'm doing , i'm in need of help, thanks.

i suggest use class injection <html> tag. javascript code inject whatever class want (depending on location (winter vs summer) or local time (day vs night)). , css have backgrounds (or other differences accordingly.

css:

.spring {background-image: url("springtree.jpg");} .summer {background-image: url("summertree.jpg");} ... 

you can have other differences:

.spring li {color: green} .winter li {color: white} 

you can set class javascript this:

var html = document.getelementsbytagname('html')[0]; html.setattribute('class', 'spring'); 

or if want multiple classes inject (add) 1 need:

root.classlist.add('evening'); 

with conditions:

var d = new date(); var month = d.getmonth() + 1; var html = document.getelementsbytagname('html')[0]; if (month >= 3 && month <= 5) {     root.classlist.add('spring'); } else if (month >= 6 && month <= 8) {     root.classlist.add('summer'); } else if (month >= 9 && month <= 11) {     root.classlist.add('autumn'); } else(month == 12 || month <= 2) {     root.classlist.add('winter'); } 

Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -