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

2021 年 03 月 16 日

69次浏览

941字数

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

记得当时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 ); //var averageLife = 26300; $ ( ".dayjdt" ) . val ( day ); $ ( ".dayjdt" ) . attr ( "title" , day ); } setInterval ( runday , 86400000 ); </script> </body>
其实是很简单的，跟我主页上面的那个计算网站运行多久类似的代码，只不过我这个最后面使用的jquery写的，前面的数据获取还是用的var。

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

当然如果想看效果的话可以把最后的setinterval的间隔时间改为1000，不过其实毕竟是计算天的，所以并没有明显的效果，可以改变电脑时间来看具体的效果，我这里就不演示啦。
代码逻辑我觉得还是非常清晰的，所以就不多做概述了。一看就懂。