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

honmaple 發布于2019-08-23 13:54 / 2715人閱讀

摘要：故事場景在一個群里，每天有個群友發送一個圖片，圖片上寫了距離年底還有天。制作流程計算到年底多少天。首先要得到年底的日期。即當前年數月日。

故事場景

在一個群里，每天有個群友發送一個圖片，圖片上寫了：距離年底還有**天。感覺時間越來越近。是不是有點惶恐。不過感覺挺有用的。有時候想劃劃水。結果想到群友的圖，就轉而去碼字了。前兩天那位群友貼上了生成圖片的 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)

然后是控制臺打?。?/p>

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之間的距離

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99751.html

2016年總結 - 收藏集 - 掘金

摘要：然而這次的文章，就像賀師俊所說的這篇文章是從程序員這個老年度總結前端掘金年對我來說，是重要的一年。博客導讀總結個人感悟掘金此文著筆之時，已經在眼前了。今天，我就來整理一篇，我個人認為的年對開發有年終總結掘金又到 2016 Top 10 Android Library - 掘金過去的 2016 年，開源社區異?；钴S，很多個人與公司爭相開源自己的項目，讓人眼花繚亂，然而有些項目只是曇花一...

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