我正在参与「码上挑战赛」详情请看：码上挑战赛来了！
韶光荏苒，似乎10年前就在昨天，可是咱们却现已不再年青，你知道你的人生进度条过了多少了么？ 咱们来用vue写一个吧。
这儿有一个假定哈，咱们假定(假如有异议，以你为准)，咱们作业到80岁就退休了。所以这个人生计时器，是以80岁为界限，退休之后就不再计入了哈，那句话怎样说来着呢: “作业便是生命”。
作用展现
码上地址
主张运用电脑端翻开，移动端好像兼容有问题。
咱们假定想查询下1990年生成的人，还有多久退休
再查询一个1965 年的
兄弟们，韶光如梭，在不作业就老了。
初始化项目
假如你会运用【码上】工具，可以越过这一段落，阅读【前端页面建立】哈
咱们翻开码上(code./) ，选择【新建代码片段】【新建空白片段】创建一个空项目。
由于是编写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中，从而在页面上展现出来。
总结
哎。这个页面写出来，在电脑上运转就好好的，从手机点开，就不得行，都挤到一同去了。难怪他人说，前端花一天来完结需求，花一个月完结兼容。怎样样，好玩吧，快来试试，你的人生进度条吧。
