A quick jQuery plugin I wrote for a friend. Just will show or hide certain elements based on the time.

time-based.html

<!-- show this div between 2:00 and 2:30 September 19 -->
<div class="time-based" data-start="September 19, 2013 14:00:00 CDT" data-end="September 19, 2013 14:30:00 CDT">Hello there!</div>



<script>
  $( ".time-based" ).timeBased();
</script>

time-based.js

$.fn.timeBased = function ( options ) {
  options = $.extend( {}, $.fn.timeBased.defaults, options );
  return this.each( function ( i, el ) {
    var $el = $( el );

    var dStart = Date.parse( $el.data( "start" ) );
    var dEnd   = Date.parse( $el.data( "end" ) );
    
    var state = "uninitialized";

    var check = function () {
      var now = +(new Date());
      var newState = now >= dStart && now <= dEnd;
      if ( state !== newState ) {
        state = newState;
        options[ newState ? "on" : "off" ]( $el );
      }
    };
    
    setInterval( check, options.interval );
    check();
  });
  
}

$.fn.timeBased.defaults = {
  on: function ( $el ) {
    $el.show();
  },
  off: function ( $el ) {
    $el.hide();
  },
    interval: 1000
};