时间戳

首页 > 解决方案 > JavaScript - 使用 setInterval 更新 innerHTML 在 Chrome 中有时不可见

javascript - JavaScript - 使用 setInterval 更新 innerHTML 在 Chrome 中有时不可见

问题描述

我试图通过 setInterval 使用 JavaScript 更新 Label innerHTML，但有时没有显示。<body>但是在调用该函数后单击它显示的其他区域后。

FF 上的一切看起来都不错，Google Chrome 上的问题。

var LABEL_COUNTDOWN = "Your code will expire in ，$TIMER$ seconds";
function initCodeTimer() {
    var timeleft = 10;
    document.querySelector('.jq-message--label').innerHTML = "";
    SEND_CODE_COUNTDOWN_TIMER = setInterval(function () {
        document.querySelector('.jq-message--label').innerHTML = LABEL_COUNTDOWN.split("$TIMER$").join(timeleft);
        timeleft -= 1;
        if (timeleft <= 0) {
            clearInterval(SEND_CODE_COUNTDOWN_TIMER);
        }
    }, 1000);
}
.jq-message--label{
    display: block;
    position: relative !important;
    margin: 5px 0 0;
    font-size: 1rem;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: normal;
}
<button onclick="initCodeTimer();">START</button>
<label class="jq-message--label"></label>

我检查了标签元素，发现 innerHTML 内容正在呈现但未显示在页面上。不确定根本原因是什么。任何帮助将不胜感激。

谢谢 - DS

标签： javascripthtml

解决方案

推荐阅读