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

honmaple 发布于2019-08-23 13:54 / 2682人阅读

摘要：故事场景在一个群里，每天有个群友发送一个图片，图片上写了距离年底还有天。制作流程计算到年底多少天。首先要得到年底的日期。即当前年数月日。

故事场景

在一个群里，每天有个群友发送一个图片，图片上写了：距离年底还有**天。感觉时间越来越近。是不是有点惶恐。不过感觉挺有用的。有时候想划划水。结果想到群友的图，就转而去码字了。前两天那位群友贴上了生成图片的 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://*/*

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

云服务器 GPU云服务器前端工程师自我介绍警示框点与点的距离 js中td之间的距离

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99751.html

2016年总结 - 收藏集 - 掘金

摘要：然而这次的文章，就像贺师俊所说的这篇文章是从程序员这个老年度总结前端掘金年对我来说，是重要的一年。博客导读总结个人感悟掘金此文着笔之时，已经在眼前了。今天，我就来整理一篇，我个人认为的年对开发有年终总结掘金又到 2016 Top 10 Android Library - 掘金过去的 2016 年，开源社区异常活跃，很多个人与公司争相开源自己的项目，让人眼花缭乱，然而有些项目只是昙花一...

DataPipeline 2019-08-20 16:04 评论0 收藏0
聊聊最近求职发生的故事

摘要：月薪两万多的，我就只做了两天，这件事，让我意识到区块链还太不成熟，距离真正的实际应用场景落地，还有很长的一段距离。 showImg(https://segmentfault.com/img/remote/1460000014227024); 说起最近的经历，一波三折，故事很多，颇有戏剧性。我在 17 年年底离开了优帆的团队，为什么离开，这里就不讲太多，因为离开的不是我一个人，已经到了...

Joyven 2019-06-28 18:42 评论0 收藏0
学不动了?可能方法不太对-Grid 网格布局

摘要：前情提要本人是一个学渣非科班入行年了吧前端东西真的好多啊又不断更新需要不断的学学学在去年年底开始我就开始不断的寻找学习的方法如何更加高效的学习如何才能学的又快又好在这半年来不断的总结慢慢找到了一些方法和诀窍此文章不是网格布局的教学文章只前情提要本人是一个学渣,非科班入行2年了吧,前端东西真的好多啊,又不断更新.需要不断的学学学, showImg(https://user-gold-c...

happyfish 2019-05-22 16:41 评论0 收藏0
记录一下自己的春招，唯品会、360、京东offer已收、腾讯offer_call已达！！！

摘要：春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品...

freewolf 2019-08-22 16:57 评论0 收藏1
19年一些微小的计划

摘要：是今年一定要学的东西这两年页面上用的三方组件多了，写的少了，的一些属性不太记得了，针对的学习计划有两个参照的样式进行学习参照的组件样式，学习如何处理样式与组件之间的关系，规范自己的写法。磕磕绊绊工作有几年了，前端界几乎每天都有新名词，令人眼花缭乱，目瞪狗呆。这两年一直在外包工作，业务写的多些，对js的基础掌握的还不是很到位。最近深感技术嗅觉迟钝，虽然平时也有看书学习，更多的时候都是断...

harriszh 2019-08-23 14:50 评论0 收藏0