距离年末还有多少天?前端猴子的自我警示

故事场景

在一个群里,天天有个群友发送一个图片,图片上写了:距离年末还有**天。感受时间愈来愈近。是否是有点惶恐。不过感受挺有用的。有时候想划划水。结果想到群友的图,就转而去码字了。前两天那位群友贴上了生成图片的 Excel 代码。可是当时我比较忙。今天闲下来了。因而就有了如今的 js 版本。效果如图:web

clipboard.png
这样,每次调试代码,打开控制台,就能看到这么警示的时间提示。是否是能够创造一个紧张气氛。chrome

制做流程

计算到年末多少天。首先要获得年末的日期。即:当前年数+12月31日。因此代码以下:google

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

而后计算当年时间毫秒数与年末时间毫秒数之差,除以一天的毫秒数,就获得具体的天数:spa

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;')

最终获得方法以下:code

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...
安装好以后,咱们添加脚本:图片

clipboard.png
点击create a new script
而后,插入以下代码:ip

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://*/* get

好了,至此,打开诸多页面开始调试都会看到这个警示了。

相关文章
相关标签/搜索