JS實現(xiàn)日歷

最近在搗鼓一個chrome插件,包括兩個功能:1.倒計時虾标,2.日歷寓盗。

大致是下面這個樣子:

Paste_Image.png
Paste_Image.png

倒計時模式倒還簡單灌砖,日歷剛開始以為困難點璧函,仔細分析后也還挺順利。

寫過日歷的一般都知道有四點很重要:

1.一個月中有幾天
2.一個月中第一天星期幾
3.一個月中第后一天星期幾
4.正確的處理換行

從我寫這個日歷的思路開始:

1.剛開始思路有點亂基显,想著既要輸出月份蘸吓,又要輸出月中的天數(shù),還要處理各種換行撩幽,好多事库继。后來我就想倒退吧,先輸出一個月的窜醉,如果指定月份的日歷輸出了宪萄,下面就是循環(huán)遍歷月份就行了。

下面是三月份的日歷輸出代碼:

    let today = new Date(),
        year = today.getFullYear(),
        month = today.getMonth();

    // ?

    let dayStr = '';
    // 3月有31天
    let dayInMonth = 31;

    // 每個月的第一天
    let firstDay = new Date(year,month,1);
    // 每個月的最后一天
    let lastDay = new Date(year,month,31);

    //第一天星期幾(0-6)
    let weekday = firstDay.getDay();
    // 當(dāng)月的最后一天星期幾
    let lastDayWeekDay = lastDay.getDay(); 

    // 每一個都是從1號開始
    let date = 1;

    // ?

    // 補齊前面的空格
    for(let i = 0; i < weekday; i++){
        dayStr += '+ ';
    }

    for(;date <= dayInMonth;date++){

        dayStr += date + ' ';
        weekday++

        // 換行處理
        if(weekday%7 == 0){
            weekday = 0;
            dayStr += '\n';
        }

    }

    // 補齊后面的空格
    for(let j = 0; j < (7 - lastDayWeekDay - 1); j++){
        dayStr += '+  ';
    }

可以把上面代碼拷貝到控制臺執(zhí)行榨惰,看下效果拜英。

可能看上去還不像日歷,日歷是有頭的琅催,周幾居凶,周幾虫给,把下面代碼分別加入上面代碼?處。

let weeks = ['日','一','二','三','四','五','六'];

dayStr += weeks.join(' ') + '\n';

這樣就比較像了侠碧。其實講到這里基本日歷就差不多了抹估,還有一個重要的方法,就是算出指定月份的天數(shù)弄兜,其實JS的 Date 里沒有給出api药蜻,所以需要自己算。
好憂傷挨队,我查了一下python里的日歷相關(guān)的給了方法谷暮。但是JS里有一個 getDate() 方法獲取月份中的第幾天。經(jīng)過網(wǎng)上的搜索盛垦,得到如下方法:

function daysInMonth(month, year) {
  return new Date(year, month + 1, 0).getDate();
}

我來解釋一下:當(dāng)我們嘗試傳入0(月份是 0-11 )一月份湿弦,2017,得到 new Date(2017,1,0)腾夯。這代表是2月份的第0天颊埃,好奇怪,哪有第0天的蝶俱?其實某月的第0天就是前一個月的最后一天班利,所以就得到了某月的天數(shù)。

完整代碼如下:

    function daysInMonth(month, year) {
      return new Date(year, month + 1, 0).getDate();
    }

    let weeks = ['日','一','二','三','四','五','六'];

    let year = new Date().getFullYear();
    let dayStr = '';

    for(let month = 0; month <=11; month++){
        // 每個月的第一天
        let firstDay = new Date(year,month,1); 
        let dayInMonth = daysInMonth(month,year);
        // 每個月的最后一天
        let lastDay = new Date(year,month,dayInMonth);

        // 第一天星期幾(0-6)
        let weekday = firstDay.getDay(); 
        // 最后一天星期幾
        let lastDayWeekDay = lastDay.getDay();
        // 每一個都是從1號開始
        let date = 1;

        dayStr += weeks.join(' ') + '\n';

        // 補齊前面的空格
        for(let i = 0; i < weekday; i++){
            dayStr += '+ ';
        }

        for(;date <= dayInMonth;date++){
            dayStr += date + ' ';
            weekday++

            if(weekday%7 == 0){
                weekday = 0;
                dayStr += '\n';
            }
        }

        // 補齊后面的空格
        for(let j = 0; j < (7 - lastDayWeekDay - 1); j++){
            dayStr += '+ ';
        }

        dayStr += '\n\n';
    }

更新:

添加githunb地址:https://github.com/ghostcode/countdown

參考:

1.http://stackoverflow.com/questions/315760/what-is-the-best-way-to-determine-the-number-of-days-in-a-month-with-javascript
2.https://github.com/lishengzxc/bblog/issues/5

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末榨呆,一起剝皮案震驚了整個濱河市罗标,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌积蜻,老刑警劉巖闯割,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異竿拆,居然都是意外死亡宙拉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門丙笋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谢澈,“玉大人,你說我怎么就攤上這事御板∽斗蓿” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵怠肋,是天一觀的道長敬鬓。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么列林? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任瑞你,我火速辦了婚禮,結(jié)果婚禮上希痴,老公的妹妹穿的比我還像新娘者甲。我一直安慰自己,他們只是感情好砌创,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布虏缸。 她就那樣靜靜地躺著,像睡著了一般嫩实。 火紅的嫁衣襯著肌膚如雪刽辙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天甲献,我揣著相機與錄音宰缤,去河邊找鬼。 笑死晃洒,一個胖子當(dāng)著我的面吹牛慨灭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播球及,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼氧骤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吃引?” 一聲冷哼從身側(cè)響起筹陵,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎镊尺,沒想到半個月后朦佩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡鹅心,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年吕粗,在試婚紗的時候發(fā)現(xiàn)自己被綠了纺荧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旭愧。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖宙暇,靈堂內(nèi)的尸體忽然破棺而出输枯,到底是詐尸還是另有隱情,我是刑警寧澤占贫,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布桃熄,位于F島的核電站,受9級特大地震影響型奥,放射性物質(zhì)發(fā)生泄漏瞳收。R本人自食惡果不足惜碉京,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望螟深。 院中可真熱鬧谐宙,春花似錦、人聲如沸界弧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽垢箕。三九已至划栓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間条获,已是汗流浹背忠荞。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留帅掘,地道東北人钻洒。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像锄开,于是被迫代替她去往敵國和親素标。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 想要實現(xiàn)的效果 點擊日期選擇框出現(xiàn)日歷 有個日期控制欄幫助選擇日期萍悴, 包括年头遭、月、日的選擇和今天 日歷格子癣诱,初次點...
    softbone閱讀 5,282評論 2 9
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,110評論 25 707
  • 2016撕予,經(jīng)歷很多事鲫惶,認(rèn)識一些人,看過屬于自己的風(fēng)景实抡,最后發(fā)現(xiàn)欠母,自己走的路坎坎坷坷有點兒長,心路兜兜轉(zhuǎn)轉(zhuǎn)也格外漫長...
    二七等于四月閱讀 191評論 0 0
  • 也不知道今天是抽了哪門子的風(fēng)吆寨,加班到晚上八點半赏淌,下班了之后,和小伙伴去喝了一點東西啄清。兩個人點了四杯抹茶飲品六水,我也是...
    零點籃球閱讀 435評論 0 0