1

我正在尝试制作一个只有一个数字并且每天更新的 chrome 扩展（减去 1）

我已经让它打印出数字作为 chrome 扩展背景，但现在我正在尝试每天更改数字。我有 4 个文件：

background.js
icon_19.png
jquery.js
manifest.json

icon_19.png 是必需的，因为要使用画布设置扩展的背景，您必须首先拥有一个图像。

jquery.js只是 javascript 库。我包括那个。

清单.json：

{
  "manifest_version": 2,

  "name": "Countdown",
  "description": "This extension countdowns to my death.",
  "version": "1.0",
  "background": {
    "scripts":["background.js"]
  },
  "browser_action": {
    "default_title": "Countdown",
    "default_popup": "countdown.html"
  }
}

背景.js：

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var myDeath = new Date();
myDeath.setMonth(7);
myDeath.setDate(16);
var canvas = document.createElement('canvas');
canvas.width = 19;
canvas.height = 19;
var ctx = canvas.getContext('2d');
var start = 18;

ctx.font='20px Arial';

setInterval(function() {
  ctx.clearRect(0,0,19,19);
  ctx.fillText(start, 0, 19, 19);
  start--;
  chrome.browserAction.setIcon({
    imageData: ctx.getImageData(0, 0, 19, 19)
  })  
}, 1000);

这是做什么的，它会打印出数字（开始）作为 chrome 扩展背景。然后它开始每 1 秒倒计时一次。它也有效。我只需要一些如何制作它，以便它只在第二天减去 -1 直到我击中myDeath。有人知道如何每天将数字更改1吗？当我打开 chrome 时，我希望这个数字每天下降一次。提前致谢！！:)

4

1 回答 1

1

几点注意事项：

  • 您需要增加刷新间隔。每秒刷新一天没有意义。我已将其设置为每 12 小时一次，但您可以将其更改为您想要的任意数量。
  • 计算日期差应该是它自己的函数，这样你就可以重复调用它。这使得代码更容易维护，因为死亡日期数据与使用它的代码是分开的。
  • 为了可维护性，我已将死亡日期配置分离到其自己的对象中。
  • death.month保存 1-12 的值。请参阅第一个代码注释。
  • death.year是可选的，并且该参数在函数中不是必需的。
  • background.js除了需要改变之外没有什么。

背景.js

var death = {
    day: 16,
    month: 8
}
var intervalHours = 12;

function getRemainingDays(d, m, y){
    var today = new Date();
    var myDeath = new Date();
    myDeath.setMonth(m-1); // Month is a range from 0-11; this lets you configure using a range from 1-12
    myDeath.setDate(d);
    if(typeof y !== "undefined"){ // if death.year is not provided, just use the current year
        myDeath.setYear(y);
    }
    return (myDeath-today)/86400000; // (myDeath-today) produces a result in milliseconds, this turns that into days
}

var canvas = document.createElement('canvas');
canvas.width = 19;
canvas.height = 19;
var ctx = canvas.getContext('2d');
ctx.font='20px Arial';

setInterval(function() {
  ctx.clearRect(0,0,19,19);
  ctx.fillText(getRemainingDays(death.day, death.month), 0, 19, 19);
  chrome.browserAction.setIcon({
    imageData: ctx.getImageData(0, 0, 19, 19)
  })  
}, (intervalHours*3600000)); // converts hours to milliseconds
于 2013-07-31T01:37:55.603 回答