Javascript 倒计时计时器在chrome扩展上停止工作。

Javascript 倒计时计时器在chrome扩展上停止工作。,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,我想我会构建chrome扩展来倒计时。 对于当前代码,如果popup.html关闭,处理将强制完成。 在这种情况下,将setInterval写入background.js是否更好? 此外,我想让你教我是否应该做具体的事情 background.js var num = window.localStorage.setItem("minite_num", 20); default_count = num*60; function count_start() { count = defaul

我想我会构建chrome扩展来倒计时。 对于当前代码,如果popup.html关闭,处理将强制完成。 在这种情况下,将setInterval写入background.js是否更好? 此外,我想让你教我是否应该做具体的事情

background.js

var num = window.localStorage.setItem("minite_num", 20);
default_count = num*60;

function count_start() {
    count = default_count;
    chrome.browserAction.setIcon({
        path: {
            "19": "img/icon_count19.png",
            "38": "img/icon_count38.png"
        }
    });
}

function count_down() {
count--;
if (count <= 0) {
    page_change();
    count_stop();
    }
}
var bg = chrome.extension.getBackgroundPage();
var num = bg.num;
var start_btn = document.count_timer.start_btn;
var count_time = document.getElementById("counter");

document.addEventListener('DOMContentLoaded', function () {
    load();
    start_btn.addEventListener('click', start_display);
});

function timer_reset() {
    timerID = 0;
}

function count_format(num) {
    var tm,ts;
    tm = Math.floor(num / 60); //分
    ts = num % 60; //秒
    if (ts < 10) ts = "0" + ts;
    return tm + ":" + ts;
}

function load(){
    display_num = bg.count_format(bg.default_count);
    bg.timer_reset();

    start_btn.disabled = false;
    count_time.innerHTML = display_num;
}

function start_display() {
    start_btn.disabled = true;
    bg.count_start();
    timerID = setInterval(function() {bg.count_down();count_time.innerHTML = bg.count;}, 1000);
}
var num=window.localStorage.setItem(“minite_num”,20);
默认计数=num*60;
函数计数\u开始(){
计数=默认计数;
chrome.browserAction.setIcon({
路径:{
“19”:“img/icon_count19.png”,
“38”:“img/icon_count38.png”
}
});
}
函数倒计时(){
计数--;

如果(计数使用chrome存储/localStorage来记住您的目标时间。 使用弹出窗口的间隔来更新您的计算。第一次,弹出窗口需要从存储器中读取数据并确定倒计时的位置。 不需要在后台执行任何操作,除非您想要分离逻辑(如在MVC中),然后可能从后台执行所有存储操作,并通过消息传递请求它。
我已经发布了一个开源的chrome扩展(trello的升级版),它有一个计数(up)计时器功能,可以做类似的事情。

准确地解释哪些代码不起作用?@ZigMandel-his interval(请参见
timerID
)生活在弹出式环境中,会被破坏。是的,时间间隔是在后台进行的,而不是弹出式环境。使用消息在两者之间进行通信them@ZigMandel一旦关闭弹出窗口,倒计时将返回停止原点。是否应将setInterval移到后台?在这种情况下,我应该如何在弹出端执行count_time.innerHTML?请阅读更多关于消息传递的信息,是的,我之前说过你需要在后台这样做。popup只在显示时才有效。感谢你教授逻辑分离和本地存储的方向。从popup中获取后台处理的数据并使其成为innerHTML的方法我想知道。很抱歉我不理解我查一下你的分机号码,谢谢。
<form name="count_timer" class="count_timer">
    <div id="counter" class="counter"></div>
    <input type="button" name="start_btn" value="START">
</form>