Change an image based on the time of day
<p>I'm working on a website that contains many elements that change based on the time of day. I would like to have an image change based on the time of day, one image for a day period, and one for night, so:</p>

<p>Day image = 8:30–00:00</p>

<p>Night image = 00:00–8:30</p>

<p>I came across this example on Stackoverflow, but I'm not sure if this is accurate to my browser time (the image change should be based on my time and not the users).</p>

<p>This is the example:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {  
    SetImage();
    window.setInterval(SetImage,1000);
});

function SetImage(){     
    var nowdate = new Date() ;
    
    var waketime = new Date();     
    waketime.setHours(6);
    waketime.setMinutes(30);
    
    var bedtime = new Date();     
    bedtime.setHours(18);
    bedtime.setMinutes(30);
    
    if(waketime &lt; nowdate  &amp;&amp; nowdate &lt; bedtime){
         $('#day').show();
         $('#night').hide();
    }else{
         $('#night').show();
         $('#day').hide();
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="night" src="http://1.bp.blogspot.com/_7-b4ZWNPaD8/TThuPK0cvUI/AAAAAAAAAAQ/jCqRshKkJd4/s1600/night-scene.jpg"&gt;
&lt;img id="day" src="http://media1.santabanta.com/full1/Events/Independence%20Day/independence-day-67a.jpg"&gt;</code></pre>
</div>
</div>
</p>

<p>Any ideas? Any help would be fantastic. Thank you :-)</p>