首页 > 解决方案 > 如何在不刷新页面的情况下使用 JavaScript 显示当前时间

问题描述

我们目前通过以下 JavaScript 函数在 ColdFusion webapp 中显示时间戳信息。当用户单击网页上的 HTML 按钮时调用此函数。问题是时间只是最后一页加载时的当前时间。因此,如果用户在页面上坐了一会儿,时间就会变得不准确。

在 JavaScript 中是否有更优雅、更准确的方法来做到这一点?或者 ColdFusion 有没有办法实时提取服务器时钟信息?

HTML 按钮

<input class="timerStart" id="startButton2" type="button" value="Insert Start Time" onclick="insertAtCaret('messageBody','---Start Time:#DateFormat(Now())# : #TimeFormat(Now())#---');" />

Javascript代码

function insertAtCaret(areaID,text) {
    var txtarea = $("textarea[data-focused=true]")[0];
    if(txtarea!=undefined)
    {
        var scrollPos = txtarea.scrollTop; 
        var strPos = 0; 
        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
                   "ff" : (document.selection ? "ie" : false ) ); 
        if (br == "ie") { 
            txtarea.focus(); 
            var range = document.selection.createRange(); 
            range.moveStart ('character', -txtarea.value.length); 
            strPos = range.text.length; 
        } 
        else if (br == "ff") {strPos = txtarea.selectionStart;}
        var front = (txtarea.value).substring(0,strPos); 
        var back = (txtarea.value).substring(strPos,txtarea.value.length); 
        txtarea.value=front+text+back; strPos = strPos + text.length; 
        if (br == "ie") { 
            txtarea.focus(); 
            var range = document.selection.createRange(); 
            range.moveStart ('character', -txtarea.value.length); 
            range.moveStart ('character', strPos); 
            range.moveEnd ('character', 0); range.select(); 
        } 
        else if (br == "ff") {
            txtarea.selectionStart = strPos; 
            txtarea.selectionEnd = strPos; 
            txtarea.focus(); 
        } 

        txtarea.scrollTop = scrollPos;
    }
}

标签: javascript

解决方案


Date使用用户系统时间,您可以使用 JavaScript函数访问当前时间和日期。

例如,您可以将代码更改为:

<input class="timerStart" id="startButton2" type="button" value="Insert Start Time" onclick="insertAtCaret('messageBody','---Start Time: ' + (new Date()).toUTCString() + ' ---');" />

这不会产生与您之前完全相同的日期/时间格式,但它可以让您开始进一步研究该主题。要真正处理日期,还请查看momentjs库:https ://momentjs.com/


推荐阅读