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


记得当时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,不过其实毕竟是计算天的,所以并没有明显的效果,可以改变电脑时间来看具体的效果,我这里就不演示啦。
代码逻辑我觉得还是非常清晰的,所以就不多做概述了。一看就懂。

最后修改:2021 年 04 月 19 日 01 : 24 PM
如果觉得我的文章对你有用,请随意赞赏