侧边栏壁纸
  • 累计撰写 180 篇文章
  • 累计收到 10 条评论

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

Datehoer
2021-03-16 / 0 评论 / 7 阅读 / 正在检测是否收录...
今天在上课的时候,说到人生剩余的时间。
记得当时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,不过其实毕竟是计算天的,所以并没有明显的效果,可以改变电脑时间来看具体的效果,我这里就不演示啦。

代码逻辑我觉得还是非常清晰的,所以就不多做概述了。一看就懂。


0

评论 (0)

取消