菜哥和隔壁老王的故事之【人生计时器】倒计时，定时器，JS练手项目

前端裁缝铺——汇总各门派优秀代码

已于 2022-04-04 15:43:39 修改

阅读量683

点赞数 13

分类专栏：菜哥和他的邻居老王文章标签： javascript 前端 html

于 2022-04-04 15:27:33 首次发布

本文链接：https://blog.csdn.net/rzzt0828/article/details/123953648

版权

故事讲述了菜哥受到老王夫妇言语刺激后，编写了一个JavaScript前端应用，包括年龄计算和人生余额计算器。此应用引发了一系列趣事，也适合初学者作为JS练手项目。

摘要由CSDN通过智能技术生成

一日，菜哥在电梯里偶遇隔壁老王和他媳妇金莲，俩人在电梯里说着“余生很长，请多指教”的屁话，刺激到了单身27年的菜哥，便决定替这俩狗测测他俩所谓的余生到底有多长，并准备将结果张贴在俩人家门口，见效果图：

菜哥写完后看了一下俩人的余生，便原谅了二人撒狗粮的行为，并抱着同情的心态将此结果张贴在了老王家门口，金莲看到后非常愤怒，在楼道里口吐芬芳，表示老王活得太久了，坚定的向药店走去。

次日，菜哥在码农圈看到老王的讣告，得知老王去世的消息，享年32岁……

好了，菜哥和隔壁老王的故事先到这里，我们看下这个引发了命案的代码和功能是怎么实现的吧。

效果一：年龄计算【输入出生日期，自动计算当前年龄和存活天数】

效果二：人生余额计算【输入存活时间，计算人生剩余的时间和告别日期】

可以在此基础上加上正则，定时器和留言板等功能。

这两个功能都比较简单，如果刚学JS的朋友可以拿来练手，完整版代码在下面了，请按需自取：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人生计时器</title>
    <style>
      #liveDay,
      #leftDate {
        font-size: 28px;
        color: red;
      }
      #age {
        font-size: 22px;
        color: blue;
      }
      .life-time {
        width: 600px;
        height: 400px;
        /* background-image: url(./imag