时光荏苒，仿佛10年前就在昨天，但是我们却已经不再年轻，你知道你的人生进度条过了多少了么？ 我们来用vue写一个吧。
这里有一个假设哈，我们假设(如果有异议，以你为准)，我们工作到80岁就退休了。所以这个人生计时器，是以80岁为界限，退休之后就不再计入了哈，那句话怎么说来着呢: "工作就是生命"。
效果展示
码上掘金地址
建议使用电脑端打开，移动端好像兼容有问题。
我们假设想查询下1990年生成的人，还有多久退休
再查询一个1965 年的
兄弟们，时光如梭，在不工作就老了。
初始化项目
如果你会使用【码上掘金】工具，可以跳过这一段落，阅读【前端页面搭建】哈
我们打开码上掘金(code.juejin.cn/) ，选择【新建代码片段】【新建空白片段】创建一个空项目。
由于是编写vue代码，我们点击script处右边的设置，我们加入vue.js链接。
打开后，我们在【添加依赖资源】处我们添加vue.js的地址: cdn.jsdelivr.net/npm/vue@2.6…
最后，我们写一个hello world测试案例。
点进运行，能够成功看到hello juejin.pdudo，就证明我们初始化项目成功了。
Html页面搭建
我们项目的目的是让用户输入出生日期，而后点击按钮查询，用以输出工作时间占比进度条，所以整个页面就是很简单，核心的部件为: 一个输入框、一个按钮、还有一个进度条。我们再加上一些提示等。
页面代码编写如下:
我们尝试运行一下，效果如下:
我们核心骨骼有了，我们再给添点“肉”，我们将css也给整合进去，点击运行后效果如下:
css这里就暂不过多介绍了，面向搜索引擎编程总没错。
判断日期是否合规
我们前端写完了之后，我们就可以接入vue了，我们将计划输入日期后校验一下是否准确，随后输出语句来提示用户日期输入是否正确。
而vue给我们提供了@keyup的事件，我们可以将input给修改一下，代码如下:
<input type="text" @keyup="replaceVal" v-model="userInput">
这样的话，我们每次输入，都会走replaceVal方法，去校验输入的数据是否合规了.
那么如何来校验呢？ 我们可以先来判断数据格式是否合规，我们假设我们要获取的类型为: yyyy-mm-dd的类型，那我们就可以写一个正则表达式来校验一下，具体正则表达式为:
[1-9]{1}[0-9]{3}-[0-9]{2}-[0-9]{2}
其中，[0-9] 代表能够匹配: 0,1,2,3,4,5,6,7,8,9的任何一个，而后面的{number}表示前面的数据匹配多少次，我们反过来看正则，首先1-9匹配1次，而后0-9匹配三次，这个正好可以用来匹配年，因为年有4位，而而且第一位不应该为0，随后我们匹配了字符-，后面和上面同理，这样，我们就能够匹配年月日出来了。
最后，我们要知晓，月份的范围是为1-12的，而每月天数是从1-最大31天的。
在js中，我们使用str.search(正则表达式)，如果结果为-1，就表示匹配不成功。
有了如上知识铺垫，我们很快就写出了代码，如下:
如上代码是先用正则匹配输入的年月日，而后再根据匹配的结果，来输出对应的小提示，我们小提示使用msg变量来控制的。
我们尝试来跑一下呢，正确的日期:
错误的日期
计算还能工作多久
如上，我们拿到了出生日期，我们来计算，还能工作多久呢？ 具体算法如下:
如文章开头所述，我们假设工作到80岁退休，假设我现在18岁，就用18除以80再乘以100，就能看到我的进度条了。
如下，我们假设到80岁退休，我们目前进度条已经走过22.5%了，怎么样，这个算法还行吧。
可是，我们在项目中，也要将岁数算出来么？
我们可以将其全部转为时间戳来计算，就可以了。
具体方法我们用图来展示一下：
上面图示，蓝色框框圈起来的，是不是很像一个进度条呢？
具体代码如下:
我们再按钮部分，做了一个点击事件，当点击查询时，我们就会跳到queryLife方法，而该方法就是计算百分率，而后在写入youLife中，从而在页面上展示出来。
总结
哎。这个页面写出来，在电脑上运行就好好的，从手机点开，就不得行，都挤到一起去了。难怪别人说，前端花一天来完成需求，花一个月完成兼容。怎么样，好玩吧，快来试试，你的人生进度条吧。
