如何使用Javascripts每秒向右移动10像素，向下移动10像素_Javascript_Jquery_Html_Ecmascript 6_Javascript Objects

如何使用Javascripts每秒向右移动10像素，向下移动10像素

javascript jquery html ecmascript-6

如何使用Javascripts每秒向右移动10像素，向下移动10像素,javascript,jquery,html,ecmascript-6,javascript-objects,Javascript,Jquery,Html,Ecmascript 6,Javascript Objects,我想在浏览器中从左到右设置一个div的动画（比如高度50px，宽度50px）我没有太多代码可以共享。我可以在这里分享我的html css部分 <!DOCTYPE html> <html lang="en"> <head> <style> .box{ width:100px; height:100px; position: absolute; } .blue{

我想在浏览器中从左到右设置一个div的动画（比如高度50px，宽度50px）

我没有太多代码可以共享。我可以在这里分享我的html css部分

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box{
        width:100px;
        height:100px;
        position: absolute;
    }
    .blue{
        background:#00f;
    }
    .position{
        margin-top: 50px;
    }
 </style>

</head>
<body>

<div class="box blue position" id="move_box"> </div>

<script>

</script>

</body>
</html>


.盒子{
宽度：100px；
高度：100px；
位置：绝对位置；
}
蓝先生{
背景：#00f；
}
.职位{
边缘顶部：50px；
}

我需要你的帮助，根据“每秒向右移动10像素，向下移动10像素”的条件，设置从左到右俯冲的动画

注意：仅在JavaScript中

提前感谢

我的剧本：

<script>
var box = document.getElementById('move_box'),
    boxPos = 0,
    boxLastPos = 0,
    boxVelocity = 0.01,
    limit = 300,
    lastFrameTimeMs = 0,
    maxFPS = 60,
    delta = 0,
    timestep = 1000 / 60,
    fps = 60,
    framesThisSecond = 0,
    lastFpsUpdate = 0,
    running = false,
    started = false,
    frameID = 0;

function update(delta) {
    boxLastPos = boxPos;
    boxPos += boxVelocity * delta;
    // Switch directions if we go too far
    if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}

function draw(interp) {

    box.style.left = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';
    box.style.top = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';

    console.log(box.style.top);

}

function panic() {
    delta = 0;
}

function begin() {
}

function end(fps) {

    /*box.style.backgroundColor = 'blue';*/

}

function stop() {
    running = false;
    started = false;
    cancelAnimationFrame(frameID);
}

function start() {
    if (!started) {
        started = true;
        frameID = requestAnimationFrame(function(timestamp) {
            draw(1);
            running = true;
            lastFrameTimeMs = timestamp;
            lastFpsUpdate = timestamp;
            framesThisSecond = 0;
            frameID = requestAnimationFrame(mainLoop);
        });
    }
}

function mainLoop(timestamp) {
    // Throttle the frame rate.
    if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
        frameID = requestAnimationFrame(mainLoop);
        return;
    }
    delta += timestamp - lastFrameTimeMs;
    lastFrameTimeMs = timestamp;

    begin(timestamp, delta);

    if (timestamp > lastFpsUpdate + 1000) {
        fps = 0.25 * framesThisSecond + 0.75 * fps;

        lastFpsUpdate = timestamp;
        framesThisSecond = 0;
    }
    framesThisSecond++;

    var numUpdateSteps = 0;
    while (delta >= timestep) {
        update(timestep);
        delta -= timestep;
        if (++numUpdateSteps >= 240) {
            panic();
            break;
        }
    }

    draw(delta / timestep);

    end(fps);

    frameID = requestAnimationFrame(mainLoop);
}

start();
</script>


var box=document.getElementById（'move_box'），
boxPos=0，
boxLastPos=0，
boxVelocity=0.01，
限值=300，
lastFrameTimeMs=0，
maxFPS=60，
δ=0，
时间步长=1000/60，
fps=60，
framesThisSecond=0，
lastFpsUpdate=0，
运行=错误，
开始=错误，
frameID=0；
函数更新（增量）{
boxLastPos=boxLastPos；
boxPos+=boxVelocity*delta；
//如果我们走得太远，就改变方向
如果（boxPos>=限制| | boxPos lastFpsUpdate+1000）{
fps=0.25*frames秒+0.75*fps；
lastFpsUpdate=时间戳；
帧秒=0；
}
framesthissond++；
var numUpdateSteps=0；
而（增量>=timestep）{
更新（时间步）；
delta-=时间步长；
如果（++numUpdateSteps>=240）{
恐慌（）；
打破
}
}
绘制（增量/时间步长）；
完(fps)；
frameID=requestAnimationFrame（主循环）；
}
start（）；

查看下面的代码。它会移动你的盒子。只要调整css和fps值，您就可以了

感谢您对动画的帮助：

var-box=document.getElementById（'move_-box'），
fpsDiv=document.getElementById（'fps'），
帧数=0，
startX=50，
startY=50，
x=startX，
y=星形，
movePerSec=10，
moveUntilY=100，
停止=错误，
fps，fps间隔，开始时间，现在，然后，过去；
box.style.position=“绝对”；
box.style.left=x+“px”；
box.style.top=y+“px”；
startAnimating（30）；
功能启动激活（fps）{
fps间隔=1000/fps；
然后=Date.now（）；
开始时间=然后；
制作动画（）；
}
函数animate（）{
//停止
如果（停止）{
返回；
}
//请求另一帧
请求动画帧（动画）；
//计算自上次循环以来经过的时间
now=Date.now（）；
过去=现在-那时；
//如果经过足够的时间，则绘制下一帧
如果（已用>FPS间隔）{
//通过设置then=now为下一帧做好准备，但是。。。
//此外，调整FPS间隔，使其不是16.67的倍数
然后=现在-（已用%fps间隔）；
//在这里画画
var sinceStart=now-startTime；
var currentFps=数学舍入（1000/（sinceStart/++frameCount）*100）/100；
fpsDiv.textContent=“animating@”+currentFps.toFixed（2）+“fps.X=“+X.toFixed（2）+”，Y=“+Y.toFixed（2）+”为“+（sinceStart/1000）.toFixed（2）+“s”设置动画；
x=x+movePerSec/currentFps；
y=y+movePerSec/currentFps；
box.style.left=x+“px”；
box.style.top=y+“px”；
如果（y>不连续移动）{
x=startX；
y=星形；
box.style.left=x+“px”；
box.style.top=y+“px”；
停止=真；
}
}
}

.box{
宽度：100px；
高度：100px；
}
蓝先生{
背景：#00f；
}


设leftStartingPoint=0；
设上起始点=50；
var元素=document.getElementById（“移动框”）；
let interval=setInterval（函数（）{
moveBox（）；
如果（topStartingPoint>=500）{//您的自定义逻辑将停止移动//
间隔时间；
}
},1000);
函数moveBox（）{
让计数=0；
让moveRight=setInterval（函数（）{
计数+=.1；
如果（计数>=10）{
计数=0；
clearInterval（右移动）；
let moveDown=setInterval（函数（）{
计数+=.1；
如果（计数>=10）{
计数=0；
清除间隔（向下移动）；
}否则{
上起点+=.1；
element.style.top=顶部起点+“px”；
}
},5);
}否则{
leftStartingPoint+=0.1；
element.style.left=leftStartingPoint+“px”；
}
},5);
}

这里有一个简单的解决方案-

let wrapperHeight = document.getElementById("wrapper").offsetHeight;
let blue_box = document.getElementById("box");
let animateDirection = 0; // animation direction, Ex- 0 for animate right bottom.

const animateBox = () => {

    let PositionLeft = blue_box.offsetLeft;
    let PositionTop = blue_box.offsetTop;

    if ((PositionLeft + 100) >= screen.width || (PositionTop + 100) >= wrapperHeight) {
        animateDirection = 1;
    } else if (blue_box.offsetLeft < 0) {
        animateDirection = 0;
    }

    if (animateDirection === 0) {
        PositionLeft = PositionLeft + 10;
        PositionTop = PositionTop + 10;
    } else {
        PositionLeft = PositionLeft - 10;
        PositionTop = PositionTop - 10;
    }

    blue_box.style.left = PositionLeft + "px";
    blue_box.style.top = PositionTop + "px";

    setTimeout(function () { animateBox() }, 1000);
}

setTimeout(function () { 
    animateBox();
    console.log('called')
}, 1000); // initialize

让wrapperHeight=document.getElementById（“wrapper”）.offsetHeight；
设blue_box=document.getElementById（“box”）；
设animateDirection=0；//动画方向，Ex-0用于设置右下角动画。
常量animateBox=（）=>{
let PositionLeft=蓝色方框。偏移左侧；
让位置TOP=蓝盒偏移；
如果（（位置左侧+100）>=屏幕宽度| |（位置顶部+100）>=包装高度）{
animatedidirection=1；
}else if（蓝色方框。偏移左侧<0）{
animatedidirection=0；
}
如果（动画方向===0）{
位置左=位置左+10；
位置顶部=位置顶部+10；
}否则{
位置左=位置左-10；
位置顶部=位置顶部-10；
}
blue_box.style.left=位置左侧+px；
blue_box.style.top=位置top+“px”；
setTimeout（函数（）{animateBox（）}，1000）；
}
setTimeout（函数（）{
animateBox（）；
console.log（'called'）
}, 1000); // 初始化

这里是一个活生生的例子-

只使用javascript，jQuery用户界面可以吗？它可以在firefox上为我工作：@olahell:：只使用javascript…@yellowsir:：你能数数吗：：它按照10像素的比例上下移动吗？？？@SelimReza 10px/秒，你的控制台

let wrapperHeight = document.getElementById("wrapper").offsetHeight;
let blue_box = document.getElementById("box");
let animateDirection = 0; // animation direction, Ex- 0 for animate right bottom.

const animateBox = () => {

    let PositionLeft = blue_box.offsetLeft;
    let PositionTop = blue_box.offsetTop;

    if ((PositionLeft + 100) >= screen.width || (PositionTop + 100) >= wrapperHeight) {
        animateDirection = 1;
    } else if (blue_box.offsetLeft < 0) {
        animateDirection = 0;
    }

    if (animateDirection === 0) {
        PositionLeft = PositionLeft + 10;
        PositionTop = PositionTop + 10;
    } else {
        PositionLeft = PositionLeft - 10;
        PositionTop = PositionTop - 10;
    }

    blue_box.style.left = PositionLeft + "px";
    blue_box.style.top = PositionTop + "px";

    setTimeout(function () { animateBox() }, 1000);
}

setTimeout(function () { 
    animateBox();
    console.log('called')
}, 1000); // initialize