Question

<abbr title="Sunday, January 01, 2017 at 12:12am" 
data-utime="0000000000" data-shorten="1" 
class="_5ptz timestamp livetimestamp">
<span class="timestampContent" id="js_d">1 hr</span></abbr>

我找到了一个脚本，但它不再有效。那么，这里有谁愿意分享如何做到这一点？

document.addEventListener("load", DisplayTimestamp());

function DisplayTimestamp() {
    var i;

    if (document.getElementsByTagName && document.getElementsByTagName("abbr").length > 0) {
        for (i = 0; i < document.getElementsByTagName("abbr").length; i++) {
            document.getElementsByTagName("abbr")[i].innerHTML += " 
    (" + new Date(document.getElementsByTagName("abbr")[i].title).toLocaleString() + ")";
        }
    }
}

到目前为止，尽管不了解javascript，我仍取得了进步。

我发现了，

document.getElementsByTagName("abbr").title;
document.getElementsByTagName("abbr")[i].innerHTML;       
document.getElementsByTagName("abbr")[i].title;

实际检索标题并在控制台中输出。不知道从这里开始做什么。

进一步取得进展，我设法让它在控制台上对实际页面进行更改。

var i = 0;
var d = new Date(); 
var n = d.toLocaleString();
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML;       
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML = n;

我不知道自己需要做什么才能在脚本中工作并始终显示时间戳，我可能会在此处创建一个按钮，但点击时会显示时间戳，并且只是构建它在浏览器扩展名中。

如果我希望它以word格式显示实际的日期和月份，

var i = 0;
var n = document.getElementsByTagName("abbr")[i].title.toLocaleString();
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML;
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML = n;

进一步的进展：

(function DisplayTimestamp() {
    var i;
    var abbrs = document.getElementsByTagName("abbr")
    if (document.getElementsByTagName && abbrs.length > 0) {
        for (i = 0; i < abbrs.length; i++) {
            abbrs[i].innerHTML += "(" + abbrs[i].title.toLocaleString() + ")";
            //console.log(document.getElementsByTagName("abbr")[i].title.toLocaleString())
        }
    }
})()

Answer 1

使用data-utime属性来构造日期，因此假设abbr是元素引用：

new Date(abbr.dataset.utime * 1000).toLocaleString()

然而，由于Facebook动态加载内容，最好使用MutationObserver来处理页面加载后添加的帖子（同样在滚动时）。这也有助于我们通过添加@run-at document-start：

来毫不拖延地显示时间戳

// ==UserScript==
// @name     FB: full timestamps
// @match    *://www.facebook.com/*
// @run-at   document-start
// @grant    GM_addStyle
// @require  https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

GM_addStyle(
    '.full-timestamp { opacity: 0.5; }' +
    '.full-timestamp:hover { opacity: 1.0; }' +
    '.full-timestamp:before { content: " ("; }' +
    '.full-timestamp:after  { content: ")"; }'
);

// process the already loaded portion of the page if any
expandDates(document.querySelectorAll('abbr[data-utime]'));

// process the stuff added from now on
setMutationHandler(document, 'abbr[data-utime]', expandDates);

function expandDates(nodes) {
    for (var i = 0, abbr; (abbr = nodes[i++]); ) {
        if (abbr.querySelector('.full-timestamp')) {
            // already processed
            continue;
        }
        abbr.insertAdjacentHTML('beforeend', '<span class="full-timestamp">' +
            new Date(abbr.dataset.utime * 1000).toLocaleString() + '</span>');
    }
}

代码使用简单的MutationObserver包装器setMutationHandler。

abbr [title] | Facebook，始终显示工具提示{timestamp}？

1 个答案: