JS基礎編--日付Date詳細と実例拡張

13879 ワード

日付ダタ javascript

一:Dateタイプ紹介
日付オブジェクトを作成するには、newオペレータとDateアーキテクチャ関数を使用すればいいです.

var now = new Date();

Date.parse()方法Date.parse()方法は、日付を表す文字列パラメータを受信し、この文字列から該当日のミリ秒数を返してみる.ECMA-622は、Date.parse()がどの日付フォーマットをサポートすべきかを規定していません.したがって、この方法の挙動は、実装によって異なり、通常は地域によって異なります.地域をに設定すると、通常は以下の日付フォーマットが適用されます.

「月/日/年」、例えば6/13/2004.

「英語月名日、年」はMay 12,2004のようです.

「英語は何曜日ですか?月名日時:分:秒タイムゾーン」、例えばTue May 25 2004:00:00 GMT+0800.

ISO 8601拡張フォーマットYYY-M-DDTHH:mm:ss:sssZ(例えば2004-05-25 T 00:00:00)このフォーマットはECMAScript 5に対応した実装のみです.

例えば、2004年5月25日に日付オブジェクトを作成するには、下記のコードが使えます.

//Tue May 25 2004 00:00:00 GMT+0800 (      )
var someDate = new Date(Date.parse('May 25,2004'));

Data.parse()に入力された方法の文字列が日付フォーマットを表していない場合、NANに戻る.実際には、日付を表す文字列を直接Date に渡すと、バックグラウンドでDate.parse()方法を呼び出すことができ、例えば、以下のコードは前のコードと等価である.

//Tue May 25 2004 00:00:00 GMT+0800 (      )
var someDate = new Date('May 25,2004');

この行のコードは前の行と同じ日付オブジェクトを取得します.
Date.UTC()方法Date.UTC()は、同じ日付のミリ秒数を返す.しかし、Date.parse()とは、値を構築する際に使用されるである.Date.UTC()のパラメータは、それぞれ年、0に基づく月数(1月は0、2月は1、順に類推)、月のどの日(1から31)、時間数(0から23)、分、秒、ミリ秒の数を表しています.これらのパラメータにおいて （）.月の日数が与えられていない場合は、日数は1とする.他のパラメータを省略すると、すべて0と仮定します.

//GMT  2000 1 1     
var y2k = new Date(Date.UTC(2000,0));
console.log(y2k); //Sat Jan 01 2000 08:00:00 GMT+0800 (      )

//GMT  2005 5 5   5:55:55
var allFives = new Date(Date.UTC(2005,4,5,17,55,55));
console.log(allFives);//Fri May 06 2005 01:55:55 GMT+0800 (      )

説明下:Green Wich Mean Time(GMT)グリニッジ標準時間イギリス、アイルランド、アイスランド、ポルトガルはこのタイムゾーンに属します.この時間帯と中国の北京時間の時差は8時間、つまり北京より8時間遅いです.
Date構造関数Date は、Date.UTC()を模倣するが、日付と時間は、GMTではなく、ローカル・タイムゾーンに基づいて作成される点が異なる.しかし、彼らのパラメータはDate.UTC()のパラメータと同じです.
たとえば:

//    2000 1 1     
var y2k = new Date(2000,0);
console.log(y2k); //Sat Jan 01 2000 00:00:00 GMT+0800 (      )

//    2005 5 5   5:55:55
var allFives = new Date(2005,4,5,17,55,55);
console.log(allFives);//Thu May 05 2005 17:55:55 GMT+0800 (      )

Date構造関数へのパラメータの伝達には、しばしば次のような方法があります.

new Date(2009、1、1);正しい

new Date(「2009/1/1」)//正しい

new Date(「2009-11-1」)//互換性がなく、Googleで解析できます.IEブラウザ9および以上の結果は「date」Invalid Date、IE 8および以下の結果はNANです.

説明:日付オブジェクトnew Date()のパラメータ形式は以下の通りです.
1)new Date(「month dd,yyyy hh:mm:ss」);2)new Date(「month dd,yyy」);3)new Date(yy,mth,dd,hh,mm,ss);4)new Date(yyy,mth,dd)5)new Date(ms)
最後の形式に注意してください.パラメータは作成する時間とGMT時間が1970年1月1日との間の差のミリ秒数を表しています.各種関数の意味は以下の通りです.
month:英語で月の名前を表します.JanuaryからDecemberrmthまで整数で月を表します.0(1月)から11(12月)までdd:一ヶ月の何日目を表しますか?1から31 yy:4桁の年hh:時間数、0(真夜中)から23(後11時)mm:分数、0から59までの整数ss:59までの整数秒数を表します.は0以上の整数です.
たとえば:

new Date("January 12,2006 22:19:35"); 
new Date("January 12,2006"); 
new Date(2006,0,12,22,19,35); 
new Date(2006,0,12); 
new Date(1137075575000);

上記の様々な作成形態は2006年1月12日の一日を表しています.
Date.now()方法ES 5は、Date.now()方法を追加し、この方法を表す日付と時間のミリ秒数を返します.この方法は、Dateオブジェクトを用いてコードを解析する作業を簡略化している.

//      
var start = Date.now();

//    
dosomething();

//      
var stop = Date.now(),
    result = stop - start;
console.log(start,stop,result); //1494292306763 1494292306768 5

function dosomething(){
    console.log('    ');
}

Date.now()方法をサポートするブラウザは、IE 9＋、FireFox 3＋、Safari 3＋、Opera 10.5＋およびChromeを含む.サポートされていない他のブラウザで、＋オペレータを使ってDateオブジェクトを文字列に変換しても、同じ目的を達成できます.

//      
var start = +new Date();

//    
dosomething();

//      
var stop = +new Date(),
    result = stop - start;
console.log(start,stop,result); //1494292306763 1494292306768 5

function dosomething(){
    console.log('    ');
}

このような例を挙げると、JavaScriptが現在のミリ秒タイムスタンプを取得するには、次のような方法があります.

console.log(Date.parse(new Date()));    //  ：1494301186000//   ;      000  
console.log((new Date()).valueOf());    //  ：1494301186175       
console.log(new Date().getTime());      //  ：1494301186175    
console.log(Date.now());                //  ：1494301186175
console.log(+new Date());               //  ：1494301186175

継承の方法
他の参照タイプと同様に、DateタイプもtoLocaleString()、toString()、valueOf()、toLocaleString()方法を書き換えた.toString()、valueOf()は、表示日時にあまり価値がない.Date() 。方法は、返された文字列ではなく、返信された日付のミリ秒表現である.そのため、オペレータを比較(大きいか小さいか)して日付値を比較するのに便利である.次の例のように:

var date1 = new Date(2007,0,1);
var date2 = new Date(2007,1,1);
console.log(date1 < date2); //true
console.log(date1 > date2); //false

日付の書式設定方法
Dateタイプには、日付を文字列に書式設定する方法があります.
ToDateStering()——具体的な形式で曜日、月、日、年を表示します.
toTimeString()——実現されたフォーマットで表示する場合、分、秒、タイムゾーン;
toLocareDateStering()——特定と地域のフォーマットで曜日、月、日と年を表示します.
toLocale TimeString()——実現された形式で表示される場合、分、秒;
UTCString()——実装されたフォーマットの完全なUTC日付に特定されます.
toLocale String()やtoString()と同様に、これらの文字列フォーマットの出力もブラウザによって異なります.したがって、ユーザインタフェース上で一致する日付情報を表示するための方法はない.
日付/時間コンポーネントの方法
以下の赤いマークはよく使われています.getDate() Date (1 ~ 31)。 getDay() Date (0 ~ 6)。 getMonth() Date (0 ~ 11)。 getFullYear() Date 。 getYear()は、getFulYear()を使用して代替してください.getHours() Date (0 ~ 23)。 getMinutes() Date (0 ~ 59)。 getSeconds() Date (0 ~ 59)。 getMilliseconds() Date (0 ~ 999)。ゲットTimezoneOffset()は、ローカル時間とグリニッジ標準時間(GMT)との分差を返します.getUTCDate()世界時によるDateオブジェクトから月の一日(1~31)に戻ります.getUTCDay()は世界時によってDateの対象から周中の一日(0~6)に戻ります.getUTCMonth()世界時によって、Dateオブジェクトから月(0~11)に戻ります.getUTCFulYear()は、世界時にDateの対象から四桁の年に戻ります.getUTCHours()世界時によってDateの対象に戻る時間(0~23).getUTCMinutes()世界時によってDateオブジェクトに戻る分(0~59).getUT CSeconds()は、世界時によってDateオブジェクトに戻る秒(0~59).getUTCMilliseconds()は、世界時によってDateオブジェクトのミリ秒(0~999)に戻ります.getTime() 1970 1 1 。 setDate() Date (1 ~ 31)。 setYear()はsetFulYear()の方法で代替してください.setMonth() Date (0 ~ 11)。 setFullYear() Date （）。 setHours() Date (0 ~ 23)。 setMinutes() Date (0 ~ 59)。 setSeconds() Date (0 ~ 59)。 setUTCDate()は、世界に応じて、Dateオブジェクトの中の月の一日(1~31)を設定する.setUTCMonth()Dateオブジェクトの月(0~11)は世界時に設定されます.setUTCFulYear()は、世界時に応じて、Dateオブジェクトの年(4桁の数字)を設定します.setUTCHours()は、世界時に応じて、Dateオブジェクト中の時間(0~23)を設定します.setUTCMinutes()は、世界時に応じて、Dateオブジェクトの分(0~59)を設定します.setUT CSeconds()は、世界時に応じて、Dateオブジェクトの中の秒(0~59)を設定します.setUTCMilliseconds()は、世界に応じて、Dateオブジェクトのミリ秒(0~999)を設定します.
呼び出し方法:

var myDate = new Date();
myDate.getYear(); //      (2 )
myDate.getFullYear(); //       (4 ,1970-????)
myDate.getMonth(); //      (0-11,0  1 )         //          myDate.getMonth()+1; 
myDate.getDate(); //     (1-31)
myDate.getDay(); //      X(0-6,0     )
myDate.getTime(); //      ( 1970.1.1      )
myDate.getHours(); //       (0-23)
myDate.getMinutes(); //       (0-59)
myDate.getSeconds(); //      (0-59)
myDate.getMilliseconds(); //       (0-999)

簡単な常用例
1.現在時間の取得

function getNowTime() {
    return new Date();
}

2.時間と日数を足す

function getTimeAddDays(time, days) {
    return new Date(time.getTime() + days * 24 * 60 * 60 * 1000);
}

3.取得と書式設定日:年-月-日

function getFormatDate(time) {
   return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
}

4.文字列を日付に変換します.文字列の書式:2011-11-20

function convertToDate(strings) {
    return new Date(Date.parse(strings.replace(/-/g, "/")));
}

または:

function convertToDate(strings) {
    return new Date(strings.replace(/-/g, "/"));
}

5.週の取得と書式設定

//           
var str = "     " + "       ".charat(new Date().getDay());

JS階段編--JS計算システムの現在の日付は何曜日ですか?
6.時間の比較

function compareTime(time1, time2) {
    return time1.getTime() - time2.getTime();
}

7.2つの日付の間の日数を計算します.

function getDays(time1, tiem2){
    var day = 24*60*60*1000;
    return (time1.getTime() - time2.getTime())/day;
}

拡張例
1.JSはある年の何月に何日間があるかを判断します.
JavaScriptの中のsetMilliseconds() Date (0 ~ 999)。のこの日付の構造方法には、「xxxxx/xx/0」(0号)が入ってきたら、得られた日付は「xx」月の前の月の最後の日(「xx」月の最大値は69、余談)であり、setTime() Date 。に入ったらnew Date("xxxx/xx/xx")を得ることができます.また、最大のメリットは、「xxxx/3/0」が入ってくると、xxxx年2月の最後の日になります.うるう年であるかどうかを自動的に判断して28または29に戻ります.自分で判断しなくてもいいです.とても便利です.だから、私たちは選択年をもらいたいです.月は何日間ありますか?
var d=new Date(「選択年/選択月+1/0」);alert(d.get Date();
次はJavascriptを使って作成した、ある年のある月に何日間のget Days InOnemonth(year、month)を取得する方法です.

  function getDaysInOneMonth(year, month){  
     month = parseInt(month,10)+1;  
     var d= new Date(year+"/"+month+"/0");  
     return d.getDate();  
  }

Chromeブラウザ(Googleブラウザ)はこの特性をサポートしていません.結果はNANです.互換性の問題ですね.その理由は標準の日付書式ではないからです.
次のようなフォーマットに変更すればOKです.

function getDaysInMonth(year,month){
  var month = parseInt(month,10);
  var temp = new Date(year,month,0);
  return temp.getDate();
}
console.log(getDaysInMonth(2017,2)); //28

2.jsはある年の何月の何日間を獲得しますか?土曜日と日曜日です.



    function time(y,m){
    var tempTime = new Date(y,m,0);
    var time = new Date();
    var saturday = new Array();
    var sunday = new Array();
    for(var i=1;i<=tempTime.getDate();i++){
        var ss = time.setFullYear(y,m-1,i);
        var day = time.getDay();
        if(day == 6){
            saturday.push(i);
        }else if(day == 0){
            sunday.push(i);
        }
    }
    var text = y+" "+m+"  "+"<br />"
                +"  ："+saturday.toString()+"<br />"
                +"  ："+sunday.toString();
    document.getElementById("text").innerHTML = text;
}
 
time(2017,2);

3.使用JavaScript生成一个倒数7天的数组

描述：

比如今天是10月1号，生成的数组是["9月25号","9月26号","9月27号","9月28号","9月29号","9月30号","10月1号"]。
这个难点就是需要判断这个月份(可能还需要上一个月份)是30天还是31天，而且还有瑞年的2月28天或者29天。

方法一：
不需要那么复杂，在js中非常简单，因为js的date对象是可以参与数学运算的！！！看下面的代码：

var now = new Date('2012/3/2 12:00:00'); 
var s = '';
var i = 0;
while (i < 7) {
    s += now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() + '
';
    
    //      ！！！                    
    now = new Date(now - 24 * 60 * 60 * 1000);
    i++;
}
console.log(s);

結果:

2017/6/2
2017/6/1
2017/5/31
2017/5/30
2017/5/29
2017/5/28
2017/5/27

方法2:現在のシステム時間から、この最後から7日間の配列を計算します.

var now = new Date(); 
var s = '';
var i = 0;
while (i < 7) {
    s += now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() + '
';
    
    //      ！！！                    
    now = new Date(now - 24 * 60 * 60 * 1000); 
    i++;
}
console.log(s);

結果:

2017/6/2
2017/6/1
2017/5/31
2017/5/30
2017/5/29
2017/5/28
2017/5/27

方法三:Dateのset Date()を使う方法

var today = new Date();
var curday = today.getFullYear() +"/" + Number(today.getMonth() + 1) +"/"+ today.getDate(); //2017/11/9
var dates = [curday];
for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
       var ss = d.getFullYear() +"/" + Number(d.getMonth() + 1) +"/"+ d.getDate();
    dates.unshift(ss);
}
console.log(dates);

結果:"1999/13/0"注:set Date()メソッドは、一ヶ月のある日を設定するために使用します.get Date()方法は月のある日に戻ります.unshift()メソッドは、配列の先頭に1つ以上の要素を追加し、新しい長さを返します.
4.js先月、来月のフォーマットはyyy-mm-ddの日付を取得する.

function GetMonthFun(){}

//date       yyyyy-mm-dd
GetMonthFun.prototype.getPrevMonth = function(date){
    var arr = date.split('-');
    var year = arr[0]; //         
    var month = arr[1]; //         
    var day = arr[2]; //        
    var days = new Date(year, month, 0);
    days = days.getDate(); //           
    var year2 = year;
    var month2 = parseInt(month) - 1;
    if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
    }
    var day2 = day;
    var days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }
    var t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}

//date       yyyyy-mm-dd
GetMonthFun.prototype.getNextMonth = function(date){
    var arr = date.split('-');
    var year = arr[0]; //         
    var month = arr[1]; //         
    var day = arr[2]; //        
    var days = new Date(year, month, 0);
    days = days.getDate(); //            
    var year2 = year;
    var month2 = parseInt(month) + 1;
    if (month2 == 13) {
        year2 = parseInt(year2) + 1;
        month2 = 1;
    }
    var day2 = day;
    var days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }

    var t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}

var dateObj = new GetMonthFun();
console.log(dateObj.getPrevMonth('2014-01-25')); //2013-12-25
console.log(dateObj.getNextMonth('2014-10-31')); //2014-11-30

[js点滴]JavaScriptのタッチイベント07