如何使用Vue和Luxon开发倒计时时钟（适用于Rockstars）电视电影小迷妹 TVco.cn

多年来，倒计时时钟一直是我工作中不可或缺的一部分，我回想起为Coheed和Cambria，Guns N Roses，Foo Fighters，Megadeth，Trivium，The Sword，Slipknot，和幽灵。这是UX的一个很好的例子，因为用户可以立即理解它，感到兴奋，并有时间返回特别声明。与电子邮件捕获配对，它势不可挡。

让我们使用Vue.js和Luxon首先创建一个简单的Countdown Clock引擎，然后我将提供一些有关如何使其独特的灵感。

我们将使用Vue.js Javascript框架开发单元素倒计时时钟。因此，让我们首先包括Vue.js CDN链接，添加ID为“ clock”的单个元素，最后初始化Vue实例。

  const app = new Vue（{ 
  el：“＃clock” 
  }）

真好现在，我们将包含Luxon，它将使处理Javascript日期和持续时间变得更加容易，并保留您的生命。我特别喜欢时区开箱即用的功能，这对我的工作至关重要。包括他们站点上提供的最小化CDN链接，这将导出我们可以使用的全局变量“ luxon”。

现在我们可以同时使用Vue和Luxon，让我们从简单地创建当前时间的时钟开始。为了做到这一点，我们将语义上友好的元素添加到我们的应用程序中，并在其中引用数据属性{{ now }} 。双花括号告诉Vue将now的data属性插值到视图中。

   {{现在}}

让我们使用Luxon的DateTime功能在Vue实例中声明data属性。

  data（）{ 
 返回{ 
 现在：luxon.DateTime.local（） 
  } 
  }

local（）方法告诉Luxon根据用户的本地时区指定日期和时间。您的应用现在应该显示当前日期和时间，但不会更新。为了调整当前时间，我们将使用setInterval（）方法每秒更新一次now属性。加载Vue实例后，应调用此方法，以便将其添加到已安装的生命周期挂钩中。

  Mounted（）{ 
  setInterval（（）=> { 
  this.now = luxon.DateTime.local（） 
  }，100） 
  }

真好现在，您的now数据属性将每100毫秒更新一次。在继续之前，让我们向应用程序添加一个名为tick的数据属性，并将其添加为对setInterval（）方法的引用，这样，当我们的倒计时完成时，我们可以使用它来调用clearInterval（）。

  data（）{ 
 返回{ 
 现在：luxon.DateTime.local（）， 
  勾号：null 
  } 
  }

  Mounted（）{ 
  this.tick = setInterval（（）=> { 
  this.now = luxon.DateTime.local（） 
  }，100） 
  }

好了，接下来我们要做的是将结束时间添加为数据属性，以便我们可以计算倒计时中剩余的时间。我们将添加另一个名为end的数据属性，并使用Luxon的plus方法创建结束时间，该结束时间为将来的10秒。这对于测试非常有用。

  data（）{ 
 返回{ 
 现在：luxon.DateTime.local（）， 
  结束：luxon.DateTime.local（）。plus（{秒：10}）， 
 勾号：null 
  } 
  }

现在，我们有了倒数计时的结束时间和当前时间的更新，我们可以计算应该在倒数计时中显示的剩余时间了。为了做到这一点，我们将使用Vue的计算功能来声明剩余时间的属性。计算属性之所以出色，是因为它们会根据其依赖关系重新评估自身，在我们的例子中，这是每次当前时间改变时。在此属性中，我们将使用Luxon的diff方法获取结束时间和当前时间之间的差异，并使用toObject()方法返回该差异（以毫秒为单位）。

 计算：{ 
 剩余的（）{ 
 返回this.end.diff（this.now）.toObject（） 
  } 
  }

现在，您可以在应用程序视图中简单地将{{ now }}更改为{{ remaining }}以向用户显示一个包含毫秒的动态数据对象，但是如果看起来有点像时钟，那将不是很好。为此，我们创建另一个名为display的计算属性，并使用Luxon的Duration属性从剩余的毫秒数创建一个duration对象。然后，我们可以使用Duration的toFormat（）方法将其放入所需的格式。在这种情况下，小时，分钟和秒的两位数字用冒号分隔。

 计算：{ 
  display（）{ 
 返回luxon.Duration.fromObject（this.remaining）.toFormat（'hh：mm：ss'） 
  } 
  }

将视图中的{{ now }}更改为{{ display }} ，您应该会看到倒数时钟。如果您让时钟滴答作响，您会注意到它不会在00:00:00停下来，而是继续计数为负数。为了避免这种情况，我们需要清除setInterval（），一旦倒计时完成，它将为时钟供电。让我们首先添加另一个称为finished的计算属性，如果当前时间大于结束时间，则该属性返回true或false。

 计算：{ 
  finish（）{ 
 返回this.now> = this.end 
  } 
  }

现在，我们需要在某个地方使用此属性来告诉间隔何时停止。我们可以在setInterval方法中执行此操作的一个地方，但是我更喜欢使用Vue监视程序来对当前时间属性的更改做出反应。这就是我们可以做到的。

 观看：{ 
  now（）{ 
 如果（已完成）{ 
  clearInterval（this.tick） 
  } 
  } 
  }

现在您的时钟应该在00:00:00停止。但是，您可能仍然会看到时钟滴答声变为-1秒。这仅仅是因为我们从卢克森收到的时间是准确的，并且不是从0毫秒开始的。您在这里有两个选择，可以更新所有的DateTime.local（）初始化以包括一个.set（）方法，以确保毫秒为0。

luxon.DateTime.local().set({ milliseconds: 0 })

或者，您可以简单地更新finish（）属性，以从end属性中减去一秒钟。

  finish（）{ 
 返回this.now> = this.end.minus（{秒：1}） 
  }

第一种解决方案确保您的时钟以精确的增量计时，第二种解决方案更像是一种视觉冲击。根据您时钟的设计，两者都可能很合适。在进入一些基本样式之前，让我们使用Vue 标签和条件渲染来更新HTML，以在完成后用消息替换倒计时。

   
   
 繁荣 
   
   
   {{display}}

恭喜！您已经使用Vue和Luxon建立了倒计时。现在，您可以使用一些基本CSS设置倒计时样式。我继续前进，在Google字体上找到了一种名为Orbitron的未来派字体，并将其与一些基本样式一起导入了我的样式表中。这使我们能够在页面中心灵活地调整红色倒数的大小。

  @import url（'https://fonts.googleapis.com/css?family=Orbitron'）;

  html，正文，主要{ 
 高度：100％; 
 宽度：100％; 
  }

 身体{ 
 背景：黑色； 
 颜色：＃D53738; 
 字体：7vh'Orbitron'，无衬线； 
  }

 主要{ 
  align-items：居中; 
 显示：flex; 
 证明内容：中心； 
  }

在Codepen上查看已完成的时钟并进行分叉，以自己进行一些调整。

前往11

下一个是什么？可能对自定义可视化有用的一件事就是我们所处的倒数时间的百分比。我们百分之十吗？ 50％？根据时钟的主题，该百分比可以发挥很大的作用。倒数开始时，图像可能会完全模糊，但会成为预告片的焦点。也许您为倒计时的每个百分比释放一秒钟的歌曲。那将是曲目的严重缓慢释放。或者，也许您只是想画一个圆形的甜甜圈？让我们尝试一下。

为了获得经过时间的百分比，我们必须首先声明开始时间。到目前为止，我们并不在乎倒数开始的时间，只在倒数结束和当前时间是什么时候。如果我们声明开始时间（也许是在与粉丝们分享倒计时的那一刻），那么我们可以算出倒计时结束的总时间以及已经过去了多少时间。我要叉起原始的笔，首先向应用程序的数据添加一个start属性。

  data（）{ 
 返回{ 
 开始于：luxon.DateTime.local（） 
  } 
  }

就本例而言，我们将说倒计时是在页面加载时开始的。接下来，我们需要在设计中使用几个新的计算属性。首先，我们将添加一个total() ，它是开始时间和结束时间之间的总时间。接下来，我们将声明一个elapsed()属性，该属性计算自倒计时开始以来经过的时间。最后，我们将创建一个percent()属性，该属性将经过的毫秒数除以总毫秒数，以得到可以乘以100的分数来计算百分比。

 计算：{ 
  total（）{ 
 返回this.end.diff（this.start）.toObject（） 
  }， 
  elapsed（）{ 
 返回this.now.diff（this.start）.toObject（） 
  }， 
 百分（） { 
 返回this.elapsed.milliseconds / this.total.milliseconds * 100 
  } 
  }

继续，从标记中删除所有属性，然后将以下CSS添加到样式表中。

 时间{ 
 边界半径：50％； 
 高度：25vh； 
 宽度：25vh； 
  }

这会将时间标签变成一个方形的圆形元素，占视图高度的25％。现在，我们将添加一个最终的计算属性，但此属性将有所不同。 Vue允许我们将元素样式绑定到计算属性，因此我们将计算背景CSS样式，该样式将创建所需的动态甜甜圈效果。我在此Sitepoint文章中找到了有关此技术的指南，该指南使用了非常实验性（且几乎不受支持）的圆锥形渐变。如果您担心支持，请查看polyfill。无论如何，这是我们新的计算属性，渐变。

 计算：{ 
 梯度（）{ 
 背景：“径向渐变（黑色60％，透明61％），圆锥渐变（＃D53738 0％$ {this.percent}％，透明$ {this.percent}％100％）” 
  } 
  }

在圆锥形渐变的顶部放置一个半径为60％的黑色圆圈的径向渐变，该渐变会动态地将红色色标的尺寸调整为倒数百分比的大小。其余的圆锥渐变将是透明的。由于这是一个计算的属性，因此随着我们经过的百分比的变化，我们的圆锥渐变的参数也会发生变化。我迫不及待想要为该渐变类型提供完整的浏览器支持。您要做的最后一件事是将元素绑定到此新的计算属性：

现在，您应该可以在倒计时期间看到一个红色的甜甜圈。如果要稍微平滑动画，只需将setInterval间隔从100调整为10，以便动画每10毫秒更新一次。

我希望这可以为一些倒计时时钟实验奠定良好的基础。我期待着您的时钟，倒计时。