Js实现累加上漂浮动画示例

我来为你详细讲解 "Js实现累加上漂浮动画示例" 的完整攻略。

1. 实现累加功能

1.1 创建HTML结构

首先，我们需要在HTML中创建相应的元素结构。其中包括两个数字框（累加器和动画器），以及一个"开始动画"按钮，代码如下：

<div>
  <span>累加器：</span>
  <input type="text" id="counter" value="0" disabled>
</div>
<div>
  <span>动画器：</span>
  <input type="text" id="animator" value="1">
</div>
<button id="startBtn">开始动画</button>

1.2 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现累加和动画效果。具体步骤如下：

1. 获取页面元素对象，代码如下：

const counterEl = document.getElementById("counter");
const animatorEl = document.getElementById("animator");
const startBtn = document.getElementById("startBtn");

1. 给 "开始动画" 按钮绑定点击事件，代码如下：

startBtn.addEventListener("click", function() {
  // 累加器的初始值为0
  let counter = 0;
  // 获取动画器的值
  const animator = parseFloat(animatorEl.value);

  // 设置定时器
  const timer = setInterval(function() {
    // 如果累加器的值 >= 动画器的值，则停止定时器
    if (counter >= animator) {
      clearInterval(timer);
      return;
    }

    // 累加器自增 1
    counter++;
    // 更新累加器的值
    counterEl.value = counter;
  }, 1000);
});

以上代码实现的功能是：点击"开始动画"按钮后，以每秒1次的速度把累加器的值自增，直到累加器的值 >= 动画器的值时，停止定时器。

1. 添加CSS样式

最后，我们需要为累加器和动画器的输入框添加样式，让它们美观一些。代码如下：

input[type="text"] {
  width: 100px;
  height: 30px;
  text-align: center;
  font-size: 18px;
}

1.3 示例说明

示例演示了一个简单的累加器功能，用户可以在动画器输入框中输入目标数值，然后点击"开始动画"按钮，数字逐渐累加直到达到目标值为止。用户可以通过改变动画器输入框的值来调整动画结束的数值。

2. 实现数字漂浮效果

2.1 创建HTML结构

首先，我们需要在HTML中创建相应的元素结构。其中包括三个数字框（累加器、动画器和漂浮器），以及一个"开始动画"按钮，代码如下：

<div>
  <span>累加器：</span>
  <input type="text" id="counter" value="0" disabled>
</div>
<div>
  <span>动画器：</span>
  <input type="text" id="animator" value="1">
</div>
<div>
  <span>漂浮器：</span>
  <input type="text" id="floater" value="100">
</div>
<button id="startBtn">开始动画</button>

2.2 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现数字漂浮效果。具体步骤如下：

1. 获取页面元素对象，代码如下：

const counterEl = document.getElementById("counter");
const animatorEl = document.getElementById("animator");
const floaterEl = document.getElementById("floater");
const startBtn = document.getElementById("startBtn");

1. 给 "开始动画" 按钮绑定点击事件，代码如下：

startBtn.addEventListener("click", function() {
  // 累加器的初始值为0
  let counter = 0;
  // 获取动画器和漂浮器的值
  const animator = parseFloat(animatorEl.value);
  const floater = parseInt(floaterEl.value, 10);

  // 设置定时器
  const timer = setInterval(function() {
    // 如果累加器的值 >= 动画器的值，则停止定时器
    if (counter >= animator) {
      clearInterval(timer);
      return;
    }

    // 累加器自增 1
    counter++;
    // 更新累加器的值
    counterEl.value = counter;

    // 计算漂浮效果的距离
    const distance = Math.sin(counter * Math.PI / animator) * floater;
    // 更新计数器的位置
    counterEl.style.transform = `translateY(${distance}px)`;
  }, 1000);
});

以上代码实现的功能是：点击"开始动画"按钮后，以每秒1次的速度把累加器的值自增，同时计算出漂浮距离，让计数器在垂直方向上浮动。

1. 添加CSS样式

最后，我们需要为计数器输入框添加样式，让它们浮动起来。代码如下：

input[type="text"] {
  width: 100px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  transition: transform 0.5s ease-in-out;
}

2.3 示例说明

示例演示了一个数字漂浮动画效果，用户可以在动画器输入框中输入目标数值和漂浮距离，然后点击"开始动画"按钮，数字逐渐累加直到达到目标值为止，同时数字会在垂直方向上漂浮一定的距离，让视觉效果更加华丽。用户可以通过改变动画器和漂浮器输入框的值来调整动画结束的数值和漂浮的距离。