Jquery Time image changer
by Mark Nelson
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="gilidimage">
</div>
CSS
#gilidimage {
height: 200px;
width: 200px;
background-image: url('https://placehold.it/200x200.png/3E2723/FFFFFF?text=default')
}
JavaScript
(function($) {
"use strict";
$(document).ready(function(){
function check_image() {
var day_night = new Date().getHours();
if (day_night > 5 && day_night <= 12) {
$("#gilidimage").css('background-image',"url('https://placehold.it/200x200.png/FFA500/FFFFFF?text=morning')");
} else if (day_night > 12 && day_night < 21) {
$("#gilidimage").css('background-image',"url('https://placehold.it/200x200.png/87CEFA/FFFFFF?text=day')");
} else {
$("#gilidimage").css('background-image',"url('https://placehold.it/200x200.png/000000/FFFFFF?text=night')");
}
}
setInterval(check_image,6000);
});
}(jQuery));