jquery 计算人生剩余时间进度条

3/16/2021 jquery

今天在上课的时候,说到人生剩余的时间。

记得当时ppt上面的图是一个长条,里面分成了好多格,类似于下图。

jquery 计算人生剩余时间进度条

当然实际上的图肯定比这个要精确一些。包括吃喝玩乐工作睡觉等方面的时间都有一个大概的计算。

然后呢,我就想写一个人生进度条,记录自己已经过了多少,还剩多少。我假设平均年龄是72岁。

以下是简单的代码:

<body>
    <div>
        <progress value="10" max="26300" class="dayjdt"></progress>
    </div>
    <script>
        function runday() {
            var ontime = new Date("2000-12-10 15:30:00");
            var nowtime = new Date();
            var timeDifference = (nowtime.getTime() - ontime.getTime());
            var ms = 86400000;
            var day = Math.floor(timeDifference / ms);
            $(".dayjdt").val(day);
            $(".dayjdt").attr("title", day);
        }
        setInterval(runday, 86400000);
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这实际上很简单,类似于我主页上面的计算网站运行时间的代码,只不过这里使用了 jQuery 来写,前面的数据获取仍然使用了 var

jquery 计算人生剩余时间进度条

如果想看效果,可以将 setInterval 的间隔时间改为 1000(1秒),尽管由于是计算天数,效果可能不会明显。如果要查看具体效果,可以更改计算机的时间来观察。