js实现从0开始计时及显示当前时间

最新推荐文章于 2021-12-20 16:32:14 发布

青樱酱

最新推荐文章于 2021-12-20 16:32:14 发布

阅读量7.6k

点赞数 1

分类专栏： js，ajax 文章标签： javascript

本文链接：https://blog.csdn.net/u012063507/article/details/70256175

版权

js，ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：

页面点击进来，就从0开始计时，动态显示用户停留在该页面的时间。

思路：

记录用户进入该页面的时间（初始时间）；

不断用当前时间-初始时间=在该页面的停留时间；

需要注意的是，应该将js函数Time()放到<body>的onload中，即页面一加载就执行

js函数应该放在<head>标签中

js：

<script type="text/javascript">
   /*
    * 显示当前时间函数
    * YQ
    */
    function Time()
    {
    var today=new Date(); 
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    duration(h,m,s);
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('timeshow').value=h+":"+m+":"+s;
    t=setTimeout('Time()',500); //暂停0.5后执行Time()函数
    }
    /*
     * 个位数时补0
     */
    function checkTime(i) 
    {
    if (i<10) 
      {i="0" + i}
      return i
    }
    /*
     * 历时：当前时间-开始时间
     * @author YQ
     */
    function duration(nh,nm,ns){
        var beginTime = document.getElementById('beginTime').value; //获取计时初始值
        var beginT = new Array();
        beginT = beginTime.split(" ");
        beginT = beginT[1].split(":");
        var sh = Number(beginT[0]);
        var sm = Number(beginT[1]);
        var ss = Number(beginT[2]);
        //换算历时 h:m:s
        var allS = (nh*3600+nm*60+ns)-(sh*3600+ sm*60 +ss);
        var dh = parseInt(allS/3600);
        var dm = parseInt((allS-dh*3600)/60);
        var ds = allS - dh*3600 - dm*60;
        document.getElementById('duration').value = dh+':'+dm+':'+ds;
    }
    
</script>

html:

<body οnlοad="Time()">

<b>历时:</b><input type="text" id="duration" style="border:0px;background-color:transparent;width:80px;" />

<b>当前时间:</b><input type="text" id="timeshow" style="border:0px;background-color:transparent;width:80px;" />

</body>

青樱酱

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录