你还在划水? 用vue做一个人生计时器吧

·  阅读 4997
你还在划水? 用vue做一个人生计时器吧

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

时光荏苒,仿佛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中,从而在页面上展示出来。

总结

哎。这个页面写出来,在电脑上运行就好好的,从手机点开,就不得行,都挤到一起去了。难怪别人说,前端花一天来完成需求,花一个月完成兼容。怎么样,好玩吧,快来试试,你的人生进度条吧。

分类:
前端
收藏成功!
已添加到「」, 点击更改