距离年底还有多少天（前端猴子的自我警示） javascript

故事场景 【距离年底还有多少天（前端猴子的自我警示）】在一个群里，每天有个群友发送一个图片，图片上写了：距离年底还有**天。感觉时间越来越近。是不是有点惶恐。不过感觉挺有用的。有时候想划划水。结果想到群友的图，就转而去码字了。前两天那位群友贴上了生成图片的 Excel 代码。但是当时我比较忙。今天闲下来了。于是就有了现在的 js 版本。效果如图：

文章图片

这样，每次调试代码，打开控制台，就能看到这么警示的时间提示。是不是可以创造一个紧张气氛。
制作流程计算到年底多少天。首先要得到年底的日期。即：当前年数+12月31日。所以代码如下：

let lastDay = new Date().getFullYear()+'-12-31'

然后计算当年时间毫秒数与年底时间毫秒数之差，除以一天的毫秒数，就得到具体的天数：

let dayCalc = (new Date(lastDay).getTime()-Date.now())/1000/24/60/60

这里是小数，我们需要转化成整数。因为我们没有算上最后一天的时间，所以我们向上取整，来解决这个问题：

let day = Math.ceil(dayCalc)

然后是控制台打印：

console.log('%c距离年底还剩','font-size:24px; color:#666; ') console.log('%c'+day+'天','font-size:32px; color:#fff; background:#f00; ')

最终得到方法如下：

function getDayLog(){ let lastDay = new Date().getFullYear()+'-12-31' let dayCalc = (new Date(lastDay).getTime()-Date.now())/1000/24/60/60 let day = Math.ceil(dayCalc) console.log('%c距离年底还剩','font-size:24px; color:#666; ') console.log('%c'+day+'天','font-size:32px; color:#fff; background:#f00; ') }

为了让在每个页面上显示，我们用一个 chrome 插件：tampermonkey （https://chrome.google.com/web...）
安装好之后，我们添加脚本：

文章图片

点击create a new script
然后，插入如下代码：

function getDayLog(){ let lastDay = new Date().getFullYear()+'-12-31' let dayCalc = (new Date(lastDay).getTime()-Date.now())/1000/24/60/60 let day = Math.ceil(dayCalc) console.log('%c距离年底还剩','font-size:24px; color:#666; ') console.log('%c'+day+'天','font-size:32px; color:#fff; background:#f00; ') } getDayLog()

记得确保match值是这样的：
// @match http://*/*
好了，至此，打开诸多页面开始调试都会看到这个警示了。