DIV在页面加载时随计算机时间移动

DIV moving with computer time on page load

本文关键字：计算机 时间 移动 加载 DIV      更新时间：2023-09-26

我目前正在做一个项目，我想知道是否有人可以帮助编写这段JS代码。我正试图使DIV在页面加载时移动。比如说，时间是上午9点；我希望它移动100像素，上午9:30移动120像素。

非常感谢。

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);
});

玩一下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);

为什么不使用这个：

$('#slideme').animate({"left": -200}, 1000);

Fiddle here

您可以使用jquery的animate函数。

$(document).ready(function() {
$( "#block" ).animate({
marginLeft: "+1200px",
}, 3000 );
});
相关文章：