DIV moving with computer time on page load

Question

I am currently working on a project and I was wondering if anyone can assist with this piece of JS code. I am trying to make the DIV move on page load. So, say for example the time is 9am; I want it to move by 100px and 9:30am move by 120px.

Thanks a lot.

function slide(element, pixels, duration) {
    var start = new Date();

    var start_x = parseInt(element.style.left, 10);

    function frame() {
        var now = new Date(),
            elap = now - start,
            frac = Math.min(elap / duration, 1),
            pos = start_x + (pixels * frac);

        element.style.left = (pos || 0) + "px";

        if (frac < 1) {
            window.requestAnimationFrame(frame);
        }
    }
    window.requestAnimationFrame(frame);
}

var div = $('#slideme');
$('#slideme').load('#slideme', function() {
    var elem = document.getElementById("slideme");
    slide(elem, -200, 1000);
});

Answer 1

Have a play with this JQuery:

// Current datetime
var d = new Date();

// Total minutes since midnight
var totalMinutes = (d.getHours() * 60) + d.getMinutes();

// Number of 30 minute intervals (since midnight)
var numberOf30Mins = Math.floor(totalMinutes / 30);

// Work out how many pixels that should be (20px per interval)
var numberOfPixelsToShift = numberOf30Mins * 20;

$('#slideme').css('left', numberOfPixelsToShift);