如何使用HTML，CSS和JavaScript创建动画倒计时计时器

您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然地访问一个插件，但是制作一个比您想象的要直接得多，而且只需要HTML，CSS和JavaScript的Trifecta。让我们一起做一个吧！

这就是我们的目标：

这是计时器所做的一些事情，我们将在这篇文章中介绍：

• 显示剩余的初始时间
• 将时间值转换为MM：SS格式
• 计算剩余的初始时间与已经过去多的时间之间的差异
• 随着时间的剩余时间而变化颜色
• 显示作为动画戒指的时间的进度

好的，这就是我们想要的，所以让我们实现它！

步骤1：从基本标记和样式开始

让我们从为计时器创建基本模板开始。我们将在内部添加一个带有圆元素的SVG，以绘制一个计时器环，该计时器环将指示传递时间并添加一个跨度以显示剩余时间值。请注意，我们正在用JavaScript编写HTML，并通过定位#APP元素将HTML注射到DOM中。当然，如果这是您的事，我们可以将其中的很多移至HTML文件中。

 document.getElementById（“ app”）.InnerHtml =`
<div>
  <svg viewbox="“" xmlns="“" http:>
    <g>
      <circle cx="“" cy="“" r="“"></circle>
    </g>
  </svg>
  <span>
    
  </span>
</div>
`;

现在，我们可以使用一些标记，让我们进行一些样式，这样我们就可以使用一个很好的视觉效果。具体来说，我们要：

• 设置计时器的大小
• 从圆圈包装元件中删除填充和笔触，以便我们获得形状，但让经过的时间显示
• 设置戒指的宽度和颜色

/ *设置容器的高度和宽度 */
.base-timer {
  位置：相对；
  身高：300px;
  宽度：300px;
}

/ *删除将隐藏时间标签的SVG样式 */
.base-timer__circle {
  填充：无；
  中风：没有；
}

/ *显示计时器进度的SVG路径 */
.base-timer__path-path {
  中风宽度：7px;
  中风：灰色；
}

这样做，我们最终得到了一个看起来像这样的基本模板。

步骤2：设置时间标签

您可能注意到，该模板包含一个空的，它将保留剩余的时间。我们将以适当的价值填充该地方。我们之前说过的时间将是MM：SS格式。为此，我们将创建一种称为formattimeleft的方法：

函数formatattimeleft（time）{
  //最大的圆形整数小于或等于时间的结果除以60。
  const分钟= Math.floor（Time / 60）;
  
  //秒是剩余时间除以60（模量运算符）
  令秒=时间％60;
  
  //如果秒的值小于10，则显示为零领先的秒
  如果（秒<p>然后，我们将在模板中使用我们的方法：</p><pre rel="JavaScript" data-line="9"> document.getElementById（“ app”）.InnerHtml =`
<div>
  <svg viewbox="“" xmlns="“" http:>
    <g>
      <circle cx="“" cy="“" r="“"> </circle>
    </g>
  </svg>
  <span>
    $ {formattime（timeleft）}
  </span>
</div>
`

为了显示戒指内的值，我们需要稍微更新样式。

 .base-timer__label {
  位置：绝对；
  
  / *大小应与父容器匹配 */
  宽度：300px;
  身高：300px;
  
  / *将标签对齐到顶部 */
  顶部：0;
  
  / *创建一个灵活的盒子，以垂直和水平的内容为中心 */
  显示：Flex;
  准项目：中心；
  Jusify-content：中心；

  /*一种任意号码；适应您的喜好 */
  字体大小：48px;
}

好的，我们准备使用Timeleft值，但是该值还不存在。让我们创建它并将初始值设置为我们的时间限制。

 //从20秒开始的初始值开始
const time_limit = 20;

//最初，没有时间已经过去了，但这会计算
//从time_limit减去
让时间超过= 0;
令timeleft = time_limit;

我们距离近一步。

就在现在，我们有一个计时器，该计时器从20秒开始……但是目前还没有任何计数。让我们将其栩栩如生，以降低到零秒。

步骤3：倒计时

让我们考虑一下我们需要计算的时间。目前，我们有一个代表我们初始时间的时间表值，并且一个时间超过的值表示倒计时一旦启动了多少时间。

我们需要做的是增加每秒一个单位的时间超过一个单位的值，并根据新的时间超过的值重新计算Timeleft值。我们可以使用setInterval函数实现这一目标。

让我们实现一种称为startTimer的方法，该方法将：

• 设置计数器间隔
• 每秒增加时间超过的值
• 重新计算Timeleft的新价值
• 在模板中更新标签值

我们还需要在需要时保留对该间隔对象的引用以清除它 - 这就是为什么我们将创建一个计时插图变量的原因。

令timerInterval = null;

document.getElementById（“ app”）。innerhtml =`...`

函数startTimer（）{
  timerInterval = setInterval（（）=> {
    
    //通过一个时间来增加的时间
    TimePassed = TimePassed = 1;
    timeleft = time_limit-时间超过；
    
    //剩余标签已更新
    document.getElementById（“ base-timer-Label”）。innerhtml = formattime（timeleft）;
  }，1000）;
}

我们有一种启动计时器的方法，但我们不会在任何地方称呼它。让我们立即开始加载计时器。

 document.getElementById（“ app”）。innerhtml =`...`
startTimer（）;

就是这样！现在，我们的计时器将计算时间。虽然这太好了，而且如果我们可以在时间标签上添加一些颜色并在不同的时间值中更改颜色，那就更好了。

步骤4：用另一个戒指盖住计时器戒指

为了可视化时间传递，我们需要在处理动画的环中添加第二层。我们正在做的实质是将一个新的绿色戒指堆放在原始灰色戒指的顶部，以便绿色的戒指动画以随着时间的流逝而露出灰色戒指，就像进度棒一样。

让我们首先在我们的SVG元素中添加一个路径元素。

 document.getElementById（“ app”）.InnerHtml =`
<div>
  <svg viewbox="“" xmlns="“" http:>
    <g>
      <circle cx="“" cy="“" r="“"> </circle>
       
    </g>
  </svg>
  <span>
    $ {formattime（timeleft）}
  </span>
</div>
`;

接下来，让我们为剩余时间路径创建一种初始颜色。

 const color_codes = {
  信息：{
    颜色：“绿色”
  }
};

令剩余的PathColor = color_codes.info.color;

最后，让我们添加一些样式，使圆形路径看起来像我们原始的灰色戒指。这里重要的是要确保宽度与原始环的大小相同，并且过渡的持续时间设置为一秒钟，以使其动画顺利，并与时间标签中剩余的时间相对应。

 .base-timer__path remaining {
  / *与原始环一样厚 */
  中风宽度：7px;

  / *圆形末端以创建一个无缝圆 */
  中风 - 莱内卡普：圆形；

  / *确保动画从圆的顶部开始 */
  变换：旋转（90度）;
  转化原始：中心；

  / *一秒钟与倒数计时器的速度对齐 */
  过渡：1S线性；

  / *允许颜色值更新时，戒指可以更改颜色 */
  中风：CurrentColor；
}

.base-timer__svg {
  / *翻转SVG并使动画从左到右移动 */
  变换：scalex（-1）;
}

这将输出覆盖计时器环的中风，但它并没有动画，而只是随着时间的流逝而揭示了计时器环。

为了使剩余时间列的长度动画，我们将使用“冲程 - dasharray属性”。克里斯（Chris）解释了它是如何用来创建元素“绘画”本身的幻想的。在CSS-tricks年鉴中，有关其属性和示例的详细信息。

步骤5：动画进度戒指

让我们看看我们的戒指的外观不同，带有不同的笔触 - 划线值：

我们可以看到的是，卒中 - 划线的值实际上将我们的剩余时间环切成相等的部分，其中长度是剩余的时间。当我们将冲程 - 划线的值设置为单位数字（即1-9）时，这就是发生这种情况。

名称Dasharray建议我们可以将多个值设置为数组。让我们看看如果我们设置两个数字而不是一个数字，它将如何表现；在这种情况下，这些值是10和30。

这将第一部分（剩余时间）的长度设置为10，第二部分（通过时间）将其设置为30。我们可以在计时器中使用一个小技巧来使用它。最初，我们需要的是覆盖圆的整个长度，这意味着剩余时间等于环的长度。

那长度是多少？拿出您的旧几何教科书，因为我们可以用数学数来计算弧线的长度：

长度=2πr= 2 *π * 45 = 282,6

这就是我们最初安装的戒指时要使用的值。让我们看看它的外观。

那可行！

好的，数组中的第一个值是我们剩余的时间，第二个值是已经过去了多少时间。我们现在需要做的是操纵第一个价值。让我们在下面查看更改第一个值时我们可以期望的。

我们将创建两种方法，一种负责计算剩下的初始时间的分数，另一种负责计算中风 - 划线值并更新代表我们剩余时间的元素。

 //将剩下的时间除以定义的时间限制。
函数calculatement fraction（）{
  返回timeleft / time_limit;
}
    
//随着时间的流逝，更新dasharray值，从283开始
函数setCircledAsharray（）{
  const circledasharray =`$ {（（
    calculateTimeFraction（） * full_dash_array
  ）.tofixed（0）} 283`;
  文档
    .getElementById（“基本 - 教派路径 - 录制”）
    .setAttribute（“ crockledAsharray”，“ stroke-dasharray”）；
}

我们还需要每秒通过的路径来更新我们的路径。这意味着我们需要在计时界面内调用新创建的setCircleDasharray方法。

函数startTimer（）{
  timerInterval = setInterval（（）=> {
    TimePassed = TimePassed = 1;
    timeleft = time_limit-时间超过；
    document.getElementById（“ base-timer-Label”）。innerhtml = formattime（timeleft）;
    
    setCircledAshArray（）;
  }，1000）;
}

现在我们可以看到事情在移动！

哇，它有效……但是……仔细观察，尤其是最后。看来我们的动画落后了一秒钟。当我们到达0时，仍然可以看到一小块戒指。

这是由于动画的持续时间设置为一秒钟。当将剩余时间的值设置为零时，将戒指实际上动画为零仍然需要一秒钟。我们可以通过在倒计时逐渐减小环的长度来摆脱这一点。我们在计算时间差异方法中这样做。

函数calculatement fraction（）{
  const rawTimeFraction = timeleft / time_limit;
  返回rawTimeFraction-（1 / time_limit） *（1- rawTimeFraction）;
}

我们去！

糟糕……还有一件事。我们说，当剩下的时间到达某些点时，我们想更改进度指标的颜色 - 就像让用户知道时间几乎上升了。

步骤6：在某些时间点更改进度颜色

首先，我们需要添加两个阈值，这些阈值将指示何时应该更改警告并提醒状态，并为每个状态添加颜色。我们从绿色开始，然后去奥兰治（Orange）作为警告，然后在时间快到时红色。

 //警告发生在10s
const Warning_threshold = 10;
//警报在5s中发生
const Alert_threshold = 5;

const color_codes = {
  信息：{
    颜色：“绿色”
  }，，
  警告： {
    颜色：“橙色”，
    阈值：Warning_threshold
  }，，
  警报： {
    颜色：“红色”，
    阈值：alert_threshold
  }
};

现在，让我们创建一种方法，该方法负责检查阈值是否超过阈值并在发生这种情况时更改进度颜色。

函数setRemainingPathColor（timeleft）{
  const {警报，警告，info} = color_codes;

  //如果剩余时间小于或等于5，请删除“警告”类并应用“警报”类。
  if（timeleft <p>因此，当计时器达到点并在其位置添加另一个时，我们基本上正在删除一个CSS课程。我们将需要定义这些课程。</p><pre rel="CSS" data-line=""> .base-timer__path-remaining.green {
  颜色：RGB（65，184，131）;
}

.base-timer__path-remaining.Orange {
  颜色：橙色；
}

.base-timer__path-remain.red {
  颜色：红色；
}

瞧，我们有。这再次是演示，一切都放在一起。

以上是如何使用HTML，CSS和JavaScript创建动画倒计时计时器的详细内容。更多信息请关注PHP中文网其他相关文章！