成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

練習(xí)一個日歷例子,輸出一個日歷,顯示當(dāng)前日期為紅色

AprilJ / 1034人閱讀

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

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

使用Date()函數(shù)

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

根據(jù)天數(shù)計算各天放置的單元格位置

每月第一天的特殊處理

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

一個包括12個月的天數(shù)的數(shù)組

效果圖:

日    一    二    三    四    五    六
                    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(); //當(dāng)前Date資訊
    var ynow = nstr.getFullYear(); //年份
    var mnow = nstr.getMonth(); //月份
    var dnow = nstr.getDate(); //今日日期
    var n1str = new Date(ynow, mnow, 1); //傳入獲取到的年月,并且日設(shè)置為1,獲取當(dāng)月的第一天的日期信息

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

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

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

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

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

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

這里有幾個重點:

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

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

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

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

date_str = idx - firstday + 1;
A: firstday是獲取當(dāng)月的第一天的周幾,用日歷的每一個格的編號來減去 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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81310.html

相關(guān)文章

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

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

    joy968 評論0 收藏0

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

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

    inapt 評論0 收藏0

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

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

    FleyX 評論0 收藏0

  • 1、正則表達(dá)式的定義及使用 2、Date類的用法 3、Calendar類的用法

    摘要：正則表達(dá)式的概念和作用正則表達(dá)式的概念和作用正則表達(dá)式的概述正則表達(dá)式也是一個字符串，用來定義匹配規(guī)則，在類中有簡單的規(guī)則定義?？梢越Y(jié)合字符串類的方法使用。簡單記正則表達(dá)式是具有特殊含義的字符串。 01正則表達(dá)式的概念和作用 * A: 正則表達(dá)式的概念和作用 * a: 正則表達(dá)式的概述 * 正則表達(dá)式也是一個字符串，用來定義匹配規(guī)則，在Pattern類中有簡單的...

    jerryloveemily 評論0 收藏0

  • java常見類API第二部分

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

    maybe_009 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<