JavaScriptオブジェクトプログラミング（1）

1つ、Dateオブジェクト
第二に、タイマー機能
3、ウェブケース
- 1.対象要件
- 2.元のコードが提供されます

補足：記事内のすべてのコードはhtmlファイルで記述されており、JSコードは<script> </ script>タグでラップする必要があります。

1つ、Dateオブジェクト

1.Dateオブジェクトを理解する

Dateオブジェクトは、JavaScriptの組み込みオブジェクトの1つです。一般的に使用される組み込みオブジェクトには、Dateオブジェクト、Mathオブジェクト、Stringオブジェクト、Arrayオブジェクト、およびRegExpオブジェクトが含まれます。Dateオブジェクトに格納される日付は、1970年1月1日の00:00:00からのミリ秒数であり、一連の時刻と日付の処理方法を提供します。以下では、主に、一般的に使用されるDateオブジェクトのプロパティとメソッドを紹介します。 Dateオブジェクトの使用方法。
テキストが始まります...
ここに画像の説明を挿入します

2.日付オブジェクトを作成します

1.パラメーターを指定せずに、以下に示すように、
現在の日付と時刻のDateオブジェクト変数myDate
構文定義を作成します。

var myDate = new Date();

日付と時刻は、後で説明する一般的な方法で取得できますが、ここでは説明しません。

2.パラメータは、
1970-1-1 00:00:00 GMT +0000に基づいてDateオブジェクトを作成するミリ秒数と経過ミリ秒数です。
構文の定義は次のとおりです。

var d = new Date(1000);

3.次のように定義された特定の日付Dateオブジェクト構文を作成するための指定された日付 Dateオブジェクトのパラメーター

var myDate = new Date("2021/09/09");

上記のステートメントは、2021年9月9日にDate変数myDateを
作成します。補足：パラメーターとして日付文字列を作成すると、日付文字列が自動的に解析され
ここに画像の説明を挿入します

ます。4。パラメーターは指定された時刻のDateオブジェクトです。Dateオブジェクトを
作成します。で、特定の日付と時刻。
次のように構文定義があります

var d = new Date(yy,mm,[dd],[hh],[mm],[ss],[ms]);   
var myDate = new Date(2021,1,2,3,4,5,6);

上記のステートメントは、2021年1月2日3：4：5：5、6ミリ秒に日付変数myDateを作成します。

補足：

年と月を除いて、他のパラメータはオプションです。入力しない場合、デフォルトは0です。
月パラメータは0から始まります。つまり、0は1月に対応します。
週番号は0から始まります。つまり、0は日曜日に対応します。

3.日付オブジェクトの一般的に使用されるメソッド

Dateオブジェクトには、日付と時刻を操作するための多くのメソッドがあります。一般的なメソッドは次の
ここに画像の説明を挿入します
とおりです。ウォームリマインダー：これらのメソッドを呼び出す前に、Dateオブジェクトを作成する必要があります。
次のように：

var myDate = new Date();
console.log(myDate.getFullYear());
console.log(myDate.getYear());

ここに画像の説明を挿入します

4.サブトピック：現在の日付と時刻を出力します

規定の形式：2021年8月21日の13:14:02。
明らかに、これは上記の方法によるパッチワークによってのみ達成できます。

[ちょっと考えた後... 2時間後...]

<p id="time"></p> 
<script> 
var myDate = new Date();  
var year = myDate.getFullYear();  
var month = myDate.getMonth() + 1;  
var date = myDate.getDate();  
var hour = myDate.getHours();  
var min = myDate.getMinutes();  
var sec = myDate.getSeconds();  
  
function fixedDigit(num) {
    
      
    return num < 10 ? "0" + num : num; //若不足2位，前面补0    
}  
  
var dateString = year + "年" + fixedDigit(month) + "月" + fixedDigit(date) + "日 " +  
    fixedDigit(hour) + ":" + fixedDigit(min) + ":" + fixedDigit(sec);  
  
document.getElementById("time").innerHTML = "当前日期为：" + dateString;
</script>

問題解決のアイデア：
①現在の日付と時刻のDateオブジェクト変数myDateを作成する
②さまざまな方法で年、月、日、時、分、秒を取得する③2
未満に0を加算する関数を作成する必要があります数字
（例：2021年1月5日-> 2021年1月5日）
④すべての変数を結合します。

第二に、タイマー機能

1.setTimeout（）

setTimeout（）は、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。
構文は次のように定義されています。

setTimeout("调用的函数名称或表达式",等待的毫秒数)

関数の呼び出し（引用符なし、括弧なし）

setTimeout(hello, 3000)
//仅填写函数名，不能加()，否则会立即执行  
function hello() {
    
      
    alert("hello");  
}

関数の呼び出し（引用符、角かっこ付き）

setTimeout("hello()", 3000)  
function hello() {
    
      
    alert("hello");  
}

匿名関数を呼び出す（引用符なし）

setTimeout(function(){
    
      
    alert("hello");  
}, 3000)

式の呼び出し（引用符、括弧付き）

setTimeout("alert('hello')", 3000)

setTimeout（）は定期的な実行を実現します：独自の関数を呼び出すと定期的な実行の効果を実現できます

function timer(){
    
      
    console.log("1");  
    setTimeout(timer,1000)  
}  
timer();

ここに画像の説明を挿入します
正直なところ、setTimeout（）を使用して定期的に実行することはお勧めしません。これは、より適切な「setInterval（）」に値するためです。

2.setInterval（）

setInterval（）は、指定された期間（ミリ秒）に従って関数または計算式を呼び出すことができます。これは、setInterval（）に2つのパラメーターがあることを意味します。最初のパラメーターは呼び出し元の関数で、2番目のパラメーターは設定時間です。一度呼び出されます。停止する場合は、タイマーをクリアする必要があります（clearInterval（）、clearTimeout（）はタイマーをクリアでき
ます）。構文は次のように定義されています。

setInterval("调用的函数名称或表达式",等待的毫秒数)

サブトピック：変数numを定義します。これは、1秒ごとに増分され、ページに表示されます。

<p id="text"></p>  
<script>  
    var num = 0;  
    setInterval(timer, 1000)  
    function timer() {
    
      
        num++;  
        document.getElementById("text").innerHTML = num;  
    } 
</script>

3. timer（）をクリアします

setInterval（）によって生成されたタイマーは自動的にクリアされないため、clearタイマーを使用する必要がありますが、setTimeout（）によって生成されたタイマーは実行後に自動的にクリアされるため、
clearInterval（）、clearTimeout（）タイマーはクリアできます
通常、次の例に示すように、クリアタイマーを関数にパックし、関数を呼び出してタイマーをクリアします。

<p id="text"></p>  
<input type="button" name="stop" id="stop" value="stop" onclick="stop()" />  
<script>  
    var num = 0;      
    var timer = setInterval(timer, 1000)      
    function timer() {
    
          
        num++;      
        document.getElementById("text").innerHTML = num;      
    }     
    function stop(){
    
        
        clearInterval(timer);    
    }  
</script>

サブトピック：現在の日付を出力します。所定の形式：2021年8月21日13:14:02、毎秒自動的に更新されます。

3、ウェブケース

1.対象要件

現在の時刻から翌年の新年（現在の年+ 1）までの残り日数を表示し、1秒ごとに更新
ここに画像の説明を挿入します
ヒント：
①2回の間のミリ秒数を取得します（取得するには2つの日付オブジェクトを減算します）
。②小学校を使用します。数学、時間変換を行うだけです。

2.元のコードが提供されます

最初に書いてみることをお勧めします。自分で完成させると、より充実したものになります。
ここに画像の説明を挿入します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<p id="text"></p>
		<script type="text/javascript">
			function showTime() {
     
     
				var time1 = new Date()
				var year = time1.getFullYear()
				var yearNext = year+1
				var time2 = new Date(yearNext,1,1,0,0,0,0)
				var cYear = time1.getTime()
				var nYear = time2.getTime()
				var leftTime = nYear-cYear;
				function fixedDigit(num) {
     
     
					num = num > 9 ? num : "0" + num
					return num
				}
				var day = leftTime
				var dateString = "距离明年元旦还剩"+getDuration(leftTime)
				document.getElementById("text").innerHTML = dateString
			}

            function getDuration(time) {
     
       
                var days = time / 1000 / 60 / 60 / 24;
                var r_days = Math.floor(days);  
                var hours = time / 1000 / 60 / 60 - (24 * r_days);
                var r_hours = Math.floor(hours);
                var minutes = time / 1000 / 60 - (24 * 60 * r_days) - (60 * r_hours);
                var r_minutes = Math.floor(minutes);
                var seconds = time / 1000 - (24 * 60 * 60 * r_days) - (60 * 60 * r_hours) - (60 * r_minutes);
                var time = '转换时间:'+r_days + '天'+ r_hours + '时' + r_minutes + '分'+parseInt(seconds) + '秒'
                return time;
            }   

			showTime()
			setInterval(showTime,1000)
		</script>
	</body>

</html>

記事について他にご意見がございましたら、訂正してください〜ここに画像の説明を挿入します

レスポンシブウェブデザインの日付オブジェクトとタイマー機能