【JavaScript/JQuery】リアルタイムに時間を表示

投稿者: | 2020年11月26日
0件のコメント
JavaSccript_setInterval

今回はjavascriptとjqueryでリアルタイムに時間を表示させるデモを実施していきたいと思います。

 

【完成後】

 

 

リアルタイムの時間が作成できるようになります

それではいってみましょうヾ ^_^♪

 

setInterval

今回は前回の日時と曜日の表示でページにアクセスした日時を表示させれるようになりましたね。

https://dailyrecords.blog/archives/8508

 

ですので以下の1文（setInterval）を追加させるだけで完成しちゃいます＼(^^)／

 

構文

setInterval（関数、一定間隔ミリ秒）

1000ミリ秒 → 1秒

 

サンプルコード

そのままコピペ(*^^)v

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
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ja">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>RealTime</title>
</head>
 
<body>
<div></div>
    <script type="text/javascript">
        //setIntervalで1000ミリ秒ごとに日時を表示
        setInterval(function() {
            $week = new Array('日', '月', '火', '水', '木', '金', '土');
 
            //インスタンス化
            let ins = new Date();
 
            //日付
            let y = ins.getFullYear();
            let M = ins.getMonth() + 1;
            let d = ins.getDate();
 
            //曜日
            let w = $week[ins.getDay()];
 
            //時間
            let h = ('0' + ins.getHours()).slice(-2);
            let m = ('0' + ins.getMinutes()).slice(-2);
            let s = ('0' + ins.getSeconds()).slice(-2);
 
            //JQueryでdivに表示
            $('div').text(y + "/" + M + "/" + d + "(" + w + ")" +
                h + ":" + m + ":" + s);
        }, 1000)
    </script>
</body>
 
</html>

【結果】

 

 

まとめ

今回は単純にページにリアルタイム時間を表示させたかったので作成してみました。

前回、日時と曜日の表示を作成したので、ついでということで…

setIntervalを追加し時間を1000ミリ秒に設定するだけで出来上がりました(^O^)

 

ちょっとペースが早すぎてわからなかったって言う方は

前回の日時と曜日の表示で詳しく解説しています。

https://dailyrecords.blog/archives/8508

 

以上です。