[JavaScript] 实时显示已进行时间

今天调试的时候,服务器突然崩了,
还以为自己写了什么天怒人怨的脚本把服务器搞坏了…
(来自小菜鸡的瑟瑟发抖 Ծ‸Ծ)

=======================================
试着写了一下实时显示已浏览时间的脚本。

初步想法是显示成 hh:mm:ss。
至于跨天…暂时先不考虑了,显示个几百个小时这种事情毕竟不大常有。

最终脚本如下:

window.onload = initSubmit();

function initSubmit(startTime){
        var startTime = new Date(startTime); // transfer string to date
        var vStartTime = startTime.getTime();

        var counter=0;
        var mrQuestionText, newLabel

        var mrQuestionText = "" + document.getElementsByClassName('mrQuestionText')[0].innerHTML; 
     
        id = setInterval(function() {
 
            var endTime = new Date();
            var vEndTime = endTime.getTime();

            var differTime = (vEndTime - vStartTime)/1000; //differ seconds

            if (differTime >= 3600) {
                var tHours = parseInt(differTime/3600);
                var tMinutes = parseInt((differTime - tHours*3600)/60);
                var tSeconds = parseInt(differTime - tHours*3600 - tMinutes*60);

              }
            else if (differTime >= 60) {
                var tHours = 0;
                var tMinutes = parseInt(differTime/60);
                var tSeconds = parseInt(differTime - tMinutes*60);
            }
            else {
                var tHours = 0;
                var tMinutes = 0;
                var tSeconds = parseInt(differTime);
            }

            var vHours = tHours>=10 ? tHours : "0"+tHours;
            var vMinutes = tMinutes>=10 ? tMinutes : "0"+tMinutes;
            var vSeconds = tSeconds>=10 ? tSeconds : "0"+tSeconds;

            newLabel = "" + "<span style='Color:blue;'>已答题时间: " +  vHours + ":"  +  vMinutes + ":" + vSeconds + "</span>" + "<BR/>" + mrQuestionText;
            document.getElementsByClassName("mrQuestionText")[0].innerHTML = newLabel;

            counter++;
     }, 1000);
    
}

显示效果:
在这里插入图片描述

遇到的问题如下:
1、传入参数 startTime 的数据格式为 string,如果直接进行计算的话,会报错。
解决:转换为时间格式后,再进行计算。

var startTime = new Date(startTime);
var vStartTime = startTime.getTime();

2、未解决
console 报错:ShowTime.js:11 Uncaught TypeError: Cannot read property ‘innerHTML’ of undefined
at initSubmit (ShowTime.js:11)
at ShowTime.js:2

还没想太明白,这个函数不是在页面加载完毕之后才执行的吗,为什么 innerHTML 会是 undefined?

这个报错并没有影响到实际执行,暂时先搁置,等想明白了再优化。

3、待整理:
(1)函数:数值转换成整数的几种用法和区别。
(2)函数:时间相关的用法和区别。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值