Home/ Questions/Q 3491402
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T11:37:56+00:00

I’ve got a javascript widget on my page that outputs times for Sunrise and

  • 0

I’ve got a javascript widget on my page that outputs times for Sunrise and Sunset. The following code is what gets output (assume that these times change every day). I have no control over the output from the widget.

<div id="sun_container">
    <div class="details">
        Sunrise: <strong>7:00AM</strong> |
        Sunset: <strong>4:30PM</strong>
    </div>
</div>

Elsewhere on my page I have an image tag that looks like this:

<div id="sun_button">
    <img src="images/day.png">
</div>

I want to parse out the sunrise time and the sunset time and compare these against the current server time (which I can output via PHP if necessary).

If the current server time is not between the sunrise and sunset times, then I want to change the image src to "images/night.png".

Any ideas on how I could do this?

EDIT: I’m now outputting the server time in the page <head> using:

var server_time = "<?=date("H:i:s", time())?>";

which outputs something like this:

var server_time = "17:07:41";

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do it very easily with the DateJS JavaScript library:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var sunrise = Date.parse($(".details strong:eq(0)").text());
 var sunset = Date.parse($(".details strong:eq(1)").text());
    if(Date.parse("" + server_time).between(sunrise, sunset)) { 
       $("img").attr("src","images/day.png")
    }
    else {
       $("img").attr("src","images/night.png")
    }
});
</script>

    Try it here!

    • 0