js语法写一秒内走完的动画

要实现一秒内走完的动画，需要对每次移动的距离进行计算。下面的例子演示了如何在一秒内将元素移动到指定位置：

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript代码：

var box = document.getElementById('box');  // 获取元素

function move() {
  var pos = 0;  // 初始位置
  var start = performance.now();  // 获取当前时间
  var distance = 350;  // 移动距离
  var duration = 1000;  // 动画持续时间（1秒）

  function frame(timestamp) {
    var elapsed = timestamp - start;  // 已经经过的时间
    var progress = elapsed / duration;  // 完成的进度（0-1之间的数值）
    var moveDistance = distance * progress;  // 每次移动的距离

    if (progress >= 1) {  // 当元素到达终点位置时停止动画
      box.style.top = distance + 'px';  // 修改元素的top属性值
      box.style.left = distance + 'px';  // 修改元素的left属性值
    } else {
      box.style.top = moveDistance + 'px';  // 修改元素的top属性值
      box.style.left = moveDistance + 'px';  // 修改元素的left属性值
      requestAnimationFrame(frame);  // 继续执行下一帧动画
    }
  }

  requestAnimationFrame(frame);  // 开始执行动画
}

box.addEventListener('click', move);  // 当元素被点击时开始动画

上面的例子中，我们使用了performance.now()函数来获取当前时间，然后计算出已经经过的时间和完成的进度，再根据进度计算出每次应该移动的距离。在动画的每一帧中，我们都更新了元素的top和left属性值，然后使用requestAnimationFrame()函数来继续执行下一帧动画，直到元素到达终点位置时停止动画。