document.write与innerHTML输出不一致：24小时制转12小时制异常求助

看起来你遇到的问题有点诡异——明明timeinString的值在控制台和document.write里都是正确的，但赋值给span的innerHTML时却全变成了6:00am。结合你的代码和现象，我整理了几个可能的原因和对应的解决办法：

1. 检查是否有其他代码覆盖了span内容 #

首先，你可以在赋值后立刻打印span的内容，确认赋值瞬间是否正确：

for (var kk = 0; kk < testingSpans.length; kk++) {
    testingSpans[kk].innerHTML = timeinString;
    console.log('赋值后的值:', testingSpans[kk].innerHTML); // 看看这里输出什么
}

如果这里输出的是正确的时间，但页面显示的是6:00am，那说明有其他JS代码在这段代码之后修改了这些span的内容。你可以检查页面里其他脚本，特别是那些在DOM加载完成后执行的代码（比如window.onload、DOMContentLoaded事件里的逻辑），看看有没有针对.testingSpan元素的批量修改操作。

2. 避免使用document.write干扰DOM结构 #

document.write的行为很特殊：如果在页面加载过程中执行，它会直接插入内容到当前位置；如果在页面加载完成后执行，它会清空整个页面重新写入。你的代码里先获取了testingSpans，然后执行document.write，这可能会打乱原来的DOM结构——比如原来的span元素被移除，而testingSpans是动态的HTMLCollection，会自动同步DOM的变化，导致你后续赋值的是新的、可能被其他逻辑影响的元素。

解决办法：直接移除document.write(timeinString);，或者用更安全的DOM操作代替它，比如：

// 创建一个新元素插入到页面，而不是用document.write
var timeEl = document.createElement('span');
timeEl.textContent = timeinString;
document.body.appendChild(timeEl);

3. 改用静态的NodeList获取元素 #

getElementsByClassName返回的是动态的HTMLCollection，它会实时反映DOM的变化。如果document.write导致DOM结构变化，这个集合可能会自动更新，导致你循环的元素不是你最初想修改的那些。

换成querySelectorAll获取静态的NodeList试试：

var testingSpans = document.querySelectorAll('.testingSpan'); // 静态集合，不会随DOM变化而更新

4. 尝试用textContent代替innerHTML #

虽然你的时间字符串里没有HTML标签，但有时候innerHTML可能会因为某些隐性的解析问题（比如特殊字符、编码问题）导致显示异常。改用textContent（专门用于设置纯文本内容）试试：

testingSpans[kk].textContent = timeinString;

5. 检查CSS伪元素是否覆盖了内容 #

有时候CSS的:before或:after伪元素会设置content属性，覆盖元素的实际内容。你可以检查页面的CSS，看看有没有针对.testingSpan的伪元素样式：

.testingSpan:before {
    content: "6:00am"; /* 如果有这种样式，会覆盖你的内容 */
}

6. 确保代码在DOM完全加载后执行 #

如果你的代码是在<head>里执行的，那时候.testingSpan元素还没有被渲染到DOM中，getElementsByClassName可能会返回空集合，或者获取到的是不完整的元素。你可以把代码放在页面底部（</body>标签之前），或者包裹在DOM加载完成的事件里：

document.addEventListener('DOMContentLoaded', function() {
    // 把你的所有代码放在这里
    var testingSpans = document.querySelectorAll('.testingSpan');
    var timeinString = <?= json_encode($view_variable, JSON_HEX_TAG); ?>;
    var H = +timeinString.substr(0, 2);
    var h = (H % 12) || 12;
    var ampm = H < 12 ? "AM" : "PM";
    timeinString = h + timeinString.substr(2, 3) + ampm;
    
    for (var kk = 0; kk < testingSpans.length; kk++) {
        testingSpans[kk].textContent = timeinString;
    }
});

先从最容易排查的步骤开始（比如检查其他代码、替换textContent），应该能很快找到问题所在。

内容的提问来源于stack exchange，提问作者jt1423