2021-03-16发表2023-10-19更新技术分享2 分钟读完 (大约338个字)

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>

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

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

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

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

http://www.datehoer.com/posts/69c4abb4-6e80-11ee-a697-01b0896cf41d/

作者

datehoer

发布于

2021-03-16

更新于

2023-10-19

许可协议

#jquery

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

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

评论

链接

分类

最新文章

归档

标签

订阅更新

follow.it