その他１４■実用■　リアルタイム時計・基本編

●2021/09/17：即時関数で囲んで、グローバル変数を消しました。
リアルタイムで時刻を刻む時計のJavaScriptです。
以前に「リアル時計３種」としてUPしていたJavaScriptは削除しました。
ここでいう「リアルタイム時計」とは本物そっくりの時計という意味ではなく、画面上で時刻を動的に刻んでいるという意味です。

基本の基本なので、「id」は時計全体の１個しか使用していません。
年月日と時間の位置を変更したり、色や数字のサイズを変える場合は、それぞれに「id」を個別に指定してCSSで装飾します。
それは「応用編」を参考にして下さい。

原本はタグの部屋のリアルタイム時刻表示から。
もう、ほとんど原本通りのソースです。

年月日が不要で時刻のみ表示したい時は
document.getElementById("ck").innerHTML=d.getFullYear()+"/"+f(d.getMonth()+1)+"/"+f(d.getDate())+"■"+f(d.getHours())+':'+f(d.getMinutes())+':'+f(d.getSeconds());
を
document.getElementById("ck").innerHTML=f(d.getHours())+':'+f(d.getMinutes())+':'+f(d.getSeconds());
に修正して下さい。

なお、今回は最新式の「insertAdjacentHTML」ではなく以前の「innerHTML」を使用。
「innerHTML」は「書き換え」ですが、「insertAdjacentHTML」は「挿入」なので、時刻がどんどん連続して表示されていくので使用できません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他１４■実用■　リアルタイム時計・基本編</title>

<!--★ここからコピー-->
<style>
/*★時計全体の指定。#ckは必須。それ以外はお好みで*/
#ck{
margin:100px auto 30px;/*★位置指定(上、左右　下)*/
background:linear-gradient(#983,#eda); /*★背景色の線形グラデーション。濃茶→薄茶*/
width:300px;/*★横幅指定*/
text-align:center;/*★文字の中央配置指定*/
font-size:18px;/*★文字サイズ指定*/
font-weight:bold;/*★太文字指定*/
color:#fff;/*★文字色　白色*/
}
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記一行は時計の位置。 id="ck"は必須-->
<div id="ck"></div>

<script type="text/javascript"><!--
/*========================================================================================
リアルタイム時計  By  https://tagnoheya.com/jstag/1/
★時計をCSSで装飾しやすいように改造　2021/9/17
=========================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
function clock2(){
function f(n){return n<10?"0"+n:n;} /*■数字表記を2桁表記にする。0なら00*/
var d=new Date;
document.getElementById("ck").innerHTML=d.getFullYear()+"/"+f(d.getMonth()+1)+"/"+f(d.getDate())+"■"+f(d.getHours())+':'+f(d.getMinutes())+':'+f(d.getSeconds());
}
clock2(); setInterval(clock2,1000);
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

実用１４■ リアルタイム時計・基本編 UP日時 : 2021/09/17

　実用１４■　リアルタイム時計・基本編　　　　UP日時 : 2021/09/17