練習一個日歷例子,輸出一個日歷,顯示當前日期為紅色

AprilJ 發布于2019-08-20 13:55 / 949人閱讀

摘要：練習一個日歷例子輸出一個日歷顯示當前日期為紅色主要的理解和掌握點是使用函數根據天數計算日歷的長度主要是行因為列是固定的一周只有天根據天數計算各天放置的單元格位置每月第一天的特殊處理很多時候是從索引開始計算例如代表個月之類一個包括個月的天數

練習一個日歷例子,輸出一個日歷,顯示當前日期為紅色
主要的理解和掌握點是:

使用Date()函數

根據天數計算日歷的長度,主要是行,因為列是固定的,一周只有7天

根據天數計算各天放置的單元格位置

每月第一天的特殊處理

很多時候是從索引0開始計算,例如0-11代表12個月之類

一個包括12個月的天數的數組

效果圖:

日    一    二    三    四    五    六
                    1    2    3
4    5    6    7    8    9    10
11    12    13    14    15    16    17
18    19    20    21    22    23    24
25    26    27    28    29    30    31

代碼:

    function is_leap(year) {
        return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));
    } //是否為閏年

    var nstr = new Date(); //當前Date資訊
    var ynow = nstr.getFullYear(); //年份
    var mnow = nstr.getMonth(); //月份
    var dnow = nstr.getDate(); //今日日期
    var n1str = new Date(ynow, mnow, 1); //傳入獲取到的年月,并且日設置為1,獲取當月的第一天的日期信息

    var firstday = n1str.getDay(); //當月第一天星期幾

    var m_days = new Array(31, 28 + is_leap(ynow), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //各月份的總天數

    //月份天數+第一天星期幾 除以7,獲取整數行數,然后取整,得到表格所需要行數,即這個月的天數需要排多少行
    var tr_str = Math.ceil((m_days[mnow] + firstday) / 7);

    //打印表格第一行（有星期標志）(表頭)
    document.write("");

    //舉例是2016年12月,有31天
    for (var i = 0; i < tr_str; i++) { //表格的行,根據當前月份的天數來確定這個月要排多少行
        document.write("");//表格的行開始
        for (var k = 0; k < 7; k++) { //表格每行的單元格,每行只有7格,0-6
            //單元格自然序列號,當前行號乘以7再加上當前行的空格號
            idx = i * 7 + k; //例如第一行的第一格就是0x7+0 =0
            date_str = idx - firstday + 1; //計算日期,例如第一行第一格就是0-當月的第一天(目前當月第一天是周四即4)+1,等于-3是一個負數,負數會顯示空格(參看下面)
            //控制日期的值在不同的星期里面顯示,如果20號是周一的話,那么就要放在周一的列里面,如此類推
            (date_str <= 0 || date_str > m_days[mnow]) //過濾無效日期（小于等于零的、大于月總天數的）
                ? date_str = " " //顯示空格
                : date_str = idx - firstday + 1; 
            //打印日期：今天底色為紅
            date_str == dnow
                ? document.write("")
                : document.write("");
        }
        document.write(""); //表格的行結束
    }

    document.write("日 一 二 三 四 五 六
" + date_str + " " + date_str + "
"); //表格結束

這里有幾個重點:

Math.ceil((m_days[mnow] + firstday) / 7)
A: 將當月的日數和1號左邊的空白格相加是因為第一天可能會排在其他空格里面,所以要把第一天左邊的空格的數量也加上,

這樣才符合日歷的設計,除以7是因為一個星期只有7天,然后進行取整,例如將4.5行取整為5行

idx = i * 7 + k;
A: 這是作為日歷的每一個格的編號用的,因為如果不這樣使用的話,沒辦法將第一行輸出0-6,

然后第二行輸出7-13,然后第三行14-20......所以這里需要用 i*7 +k 來實現這個格式

date_str = idx - firstday + 1;
A: firstday是獲取當月的第一天的周幾,用日歷的每一個格的編號來減去 firstday 的話,可以確定每一個格的日期,

日    一    二    三    四    五    六
-4    -3    -2    -1    0    1    2
3    4    5    6    7    8    9
10    11    12    13    14    15    16
17    18    19    20    21    22    23
24    25    26    27    28    29    30

但是考慮到沒有0的開始日期,所以需要額外加一
所以,(date_str <= 0 || date_str > m_days[mnow]) 這個判斷就是為了過濾負數和超過31的日期

云服務器 GPU云服務器一個PHP日歷程序用jsp寫出一個日歷 python輸出日歷 java 日歷輸出

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

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

如何造一個『為移動端而生』的日歷

摘要：主要是為了阻止微信瀏覽器的默認滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當新的月份產生之后，往中不斷。如何控制的值實現滑動效果，這個問題不是這次的重點。之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...

joy968 2019-08-20 17:42 評論0 收藏0
如何造一個『為移動端而生』的日歷

摘要：主要是為了阻止微信瀏覽器的默認滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當新的月份產生之后，往中不斷。如何控制的值實現滑動效果，這個問題不是這次的重點。之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...

inapt 2019-08-29 12:52 評論0 收藏0
如何造一個『為移動端而生』的日歷

摘要：主要是為了阻止微信瀏覽器的默認滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當新的月份產生之后，往中不斷。如何控制的值實現滑動效果，這個問題不是這次的重點。之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...

FleyX 2019-08-01 17:06 評論0 收藏0
1、正則表達式的定義及使用 2、Date類的用法 3、Calendar類的用法

摘要：正則表達式的概念和作用正則表達式的概念和作用正則表達式的概述正則表達式也是一個字符串，用來定義匹配規則，在類中有簡單的規則定義。可以結合字符串類的方法使用。簡單記正則表達式是具有特殊含義的字符串。 01正則表達式的概念和作用 * A: 正則表達式的概念和作用 * a: 正則表達式的概述 * 正則表達式也是一個字符串，用來定義匹配規則，在Pattern類中有簡單的...

jerryloveemily 2019-08-14 18:41 評論0 收藏0
java常見類API第二部分

摘要：類是日期時間格式化子類的抽象類，我們通過這個類可以幫我們完成日期和文本之間的轉換也就是可以在對象與對象之間進行來回轉換。構造方法由于為抽象類，不能直接使用，所以需要常用的子類。 day01【Object類、常用API】主要內容 Object類 Date類 DateFormat類 Calendar類 System類 StringBuilder類包裝類教學目標 -[ ] 能夠說出...

maybe_009 2019-08-16 18:22 評論0 收藏0