显示Chrome扩展程序下拉菜单中的倒计时

时间:2014-02-23 19:25:46

标签: javascript google-chrome-extension google-chrome-app

我试图在我的分机下拉列表中显示倒计时,但我有两个问题:

A)我的脚本返回错误,因为它无法从下拉列表的内容中通过id获取元素

B)即使关闭下拉菜单并重新打开它,如何保持倒计时运行?

这是我的JS:

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  

}, 1000);

在HTML中我有:

<span id="countdown"></div>

我得到的错误是: 未捕获的TypeError:无法将属性'innerHTML'设置为null

非常感谢任何帮助!谢谢 !!

1 个答案:

答案 0 :(得分:0)

A)我怀疑你的代码是放在“head”部分内的某个地方(在放置的脚本中)。在这种情况下,您所要做的就是将所有代码放在window.onload = function () { ... }DOMContentLoaded侦听器

B)这更复杂。我认为最好的解决方案是在后台页面创建计数器,并每隔一段时间从它发送消息到弹出页面。