个人中心
gpt4 book ai didi

javascript - 在 JavaScript 中使用 setInterval 制作动画

转载 作者：行者123 更新时间：2023-12-01 02:35:34 25 4
gpt4 key购买 nike

问题是如何让火车在第二次点击时回到初始位置。

本例中的动画在左侧从 0 到 400 像素处绘制。我需要第二次单击才能从 400px 绘制到 0，以便火车返回到其原始位置。

为什么在这个动画中，火车在 400px 中并不总是重要，以及我们如何在使用此函数时实现准确性。

train.onclick = function() {
  var start = Date.now(); // сохранить время начала

  var timer = setInterval(function() {
    // вычислить сколько времени прошло из opts.duration
    var timePassed = Date.now() - start;

    train.style.left = timePassed / 5 + 'px';

    if (timePassed > 2000) clearInterval(timer);

  }, 20);
}
#train {
  position: relative;
  cursor: pointer;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <img id="train" src="https://js.cx/clipart/train.gif">
</body>
</html>

最佳答案

我修改了你的代码，下面的代码运行良好:

window.onload = function() {
var train = document.getElementById("train");
var isLeftToRight = 0;
var startPosition = 0;

train.onclick = function() {
    isLeftToRight = 1 - isLeftToRight;
    var start = Date.now(); // сохранить время начала

    var timer = setInterval(function() {
    // вычислить сколько времени прошло из opts.duration
    var timePassed = Date.now() - start;
    if(isLeftToRight) train.style.left = timePassed / 5 + 'px';
    else train.style.left = (startPosition - timePassed / 5) + 'px';

    if (timePassed > 2000) {
        clearInterval(timer);
        startPosition = timePassed / 5;
    }
  }, 20);
}

关于javascript - 在 JavaScript 中使用 setInterval 制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47952449/

25 4 0
文章推荐： gwt - CellList 小部件数量不能超过 25
文章推荐： jQuery findClass 并显示这个类是什么？
文章推荐： c - 使用 AVR Controller 的 LED 矩阵
文章推荐： jQuery 选择器难以理解的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com