一个小demo和之前写的帖子内容很像

两者的区别恰恰代表了单机APP与单机APP的核心区别：

01-什么是Vue

Vue.js相当于将其集成到一个功能板中。 这是什么意思？ 例如：

电气元件包括灯泡、电池、电线、开关等，它们各自独立。 如果你想用这些来制作手电筒，你必须自己将这些材料焊接成手电筒。 这些部件之间的所有焊接都需要自己完成；

集成意味着它们直接在工厂组装。 如果需要给设备添加可控照明，只需要拿到集成设备，然后引出两根线，连接开关即可。

各种语法就像这些独立的组件。 实现逻辑和阅读文档的操作都需要自己写，Vue就像一块集成电路板。 拿到之后，只需要编写“电线和开关”即可实现控制。 这些集成包括Vue等。

这个比喻就是告诉大家，Vue提高了工作效率，简化了工作内容。 那么它的发音与View相同。

02-Vue的一些基本语法

Vue 非常强大。 所有的细节和功能都在官方教程中。 今天我只使用部分功能来实现这个小demo。本demo使用的语法包括以下内容，附上官方文档的链接。

Vue语法分为两部分，HTML语法和JS代码块中使用。 常用的语法简单总结如下：

Vue 事件处理、绑定属性 - HTML 中

Vue 指令、自定义指令 - HTML 格式

语法 - 国内Vue的语法主要分为三个部分

这有点令人困惑，但没关系。 懂得这部分的人，已经把它铭刻在基因里了。 没学过的人就不用细想了。

03-功能需求假设

从时间上来说，一般倒计时不能超过一天，短则三到五分钟，如PPT计时、小型比赛计时、打游戏建兵等，长则一两分钟小时，因此只需输入分钟数；

视觉上，我想清楚地看到时间的流逝，也想看到“时间血槽”缩短，这样无论从数据上还是视觉上都可以清楚地了解进度；

在风格方面，我希望看到舒适的布局，当我不输入任何内容或完成时，不必要的东西就会消失。

04-代码实现

通过梳理需求，代码结构分为三部分：1.倒计时输入框，2.倒计时秒板，3.倒计时血槽。 因为使用了Vue，所以将其包裹在一个大div中并命名为：

<div id="container">
      
      <div>
        ...
      div>
      
      <div>
        ...
      div>
      
      <div>
        ...
      div>
div>
<script>
    var vm = new Vue({
          el: '#container', //绑定那个div的逻辑
          data: {
            //存数据变量的
              minute: '',
              second: '',
              message: '',
              timer_interval: '', //倒计时变量存储
              isActive: "alert alert-success",
              isShow: false,
              widths: 100,
          },
          methods: {
            //放函数方法的,伪代码
            //1.countdown 
            //2.getChangeText
            //3.其他。。

          }     
      })
script>

对于上面的代码框架，我们分块来解读。

1. 时间输入

解释一下下面代码的意思：直接定义时间输入框类型，要求输入为数字格式，v-model同步更新变量，不需要输入时，‘输入倒计时（分钟）’为需要显示，@keyup.enter表示输入完成后按回车调用该函数

<div class="input-group">
  <input type="number" class="form-control" v-model="minute" placeholder="输入倒计时(分)" @keyup.enter="countdown"
         aria-describedby=" basic-addon2">
  <span class="input-group-addon" id="basic-addon2">minspan>
div>

2. 时间板

解释一下下面代码的含义： :class 是用来控制这段代码块的样式的。 风格为绿底60秒以上，黄底30-60秒，红底0-30秒； v-show 控制代码块是否可见，并且这个东西只有在有定时器的时候才会出现，但是在不定时或者定时器结束的时候是不可见的；

<div :class="isActive" v-show="isShow">
  <h1>{{ second }}h1>
  <p>秒后结束p>
div>

3.时间血槽

解释一下下面代码的意思：v-show控制代码块是否可见，即该代码块只有在定时时才出现，不定时或定时器结束时不可见； :style="{width: +'%'}" 表示 css style 中，条形图宽度参数引用 vue 数据作为参数。

<div class="progress">
    <div v-show="isShow" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" :style="{width:widths +'%'}">
          <span v-show="isShow" class="sr-only">{{widths}}% Complete (success)span>
    div>
div>

到这里废话就结束了，框架就定下来了。 目前我们已经有了输入框、显示框、血槽，但是还缺少一个重要的东西。 它是什么？

是的，这就是如何让数字移动，让血槽移动。 因为@keyup.enter=""操作是与输入框绑定的，所以现在功能正在完善中。

该函数必须具有以下功能：

代码如下所示：

<script>
methods: {
  countdown: function () {
    clearInterval(this.timer_interval); //清除上次操作
    var that = this;
    this.isShow = !this.isShow; //默认是不显示，这里取非后就显示了
    that.widths = 100;          //从100%开始
    this.second = this.minute * 60;  //这个秒数后边自减
    this.seconds = this.minute * 60; //这个秒总数后做分母
    that.timer_interval = setInterval(function () {
    //这个函数是自己算秒的
        if (that.second > 0) {
            if (that.second > 60) {
                that.isActive = "alert alert-success"; //风格绿
            } else if (that.second >= 30) {
                that.isActive = "alert alert-warning"; //风格黄
            } else if (that.second < 30) {
                that.isActive = "alert alert-danger"; //风格红
            }
            that.second--;  //自减
            that.widths = (that.second / that.seconds) * 100; //算百分比
         } else if (that.second <= 0) {
             that.second = ''     //清零
             that.isShow = false; //不展示
             that.widths = 100;   //血槽回满
             clearInterval(timer_interval);
             } else {
             clearInterval(timer_interval);
             }
             }, 1000);            //1000毫秒为1秒             
       }
    }
script>

上面的代码解释都在里面，除了一个出现了三次的东西——

最下面的两个字表示时间结束后停止时间算法，或者其他情况下停止。 最后一个处理任何剩余的情况。 才第一次出现，为什么一出现就停了？ ？

因此，例如，如果您在最后一个计时器结束前重新输入一分钟，则秒数将以两倍的速度倒计时。 因为这两个函数随后会递减变量。

因此，当第一次调用该函数时，直接消除了之前的计算。 必须有实际测量。

05-演示与体验

最终效果如下（速度提升10倍，图片压缩后很难看）

最后，把这个工具的链接发布出来，也许有人可以使用~~

后续若有更新地址，会写在文末留言中。

可以将当前体验URL复制到浏览器中：

发表评论并告诉我您认为还有哪些可以改进的地方？ 或者说可以用在什么地方呢？

招聘

秀儿！ 快点！

尽快加入这个公众号交流群，交流数据分析、SQL Hive网络爬虫等内容。

添加vx：邀请你！