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

<!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(#010,#075); /*★背景色の線形グラデーション。濃い緑→薄い緑*/
padding:5px;/*★余白指定*/
width:150px;/*★横幅指定*/
text-align:center;/*★中央配置指定*/
border:ridge 6px #aaa;/*★枠線　灰色*/
box-shadow:5px 5px 10px #666;/*★影指定*/
line-height:1.0;/*★行間指定*/
font-size:100%;/*★文字サイズ指定*/
}

#ck span{text-shadow:1px 1px 1px #000}/*★文字の影指定　黒色*/

#ymoda,#hmis{color:#f0f;font-weight:bold;}/*★「年月日」と「時間分秒」の文字色指定　赤紫色。太字指定*/
#wwd,#ry{color:#0ff;margin-left:10px;}/*★「曜日」と「年号」の文字色指定　水色。左側に余白*/

/*★時計内部の画像指定。画像を入れないなら削除*/
#bGa{
width:120px;/*★猫画像横幅*/
height:100px;/*★猫画像縦幅*/
background:url("pt55s.jpg");/*★背景画像として指定。内側に白い影(ボカシ)を入れるため*/
box-shadow:5px 5px 10px #fff inset;/*★内側に白い影(ボカシ)指定。inset指定はimgには不可*/
margin:5px auto;/*★上下に5pxの余白指定。左右中央配置*/
border-radius:10px;/*★角丸指定*/
}
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>

<!--★ここからコピー-->
<div id="ck">
<span id="ymoda"></span><span id="wwd"></span>
<div id="bGa"></div><!--★←この１行は猫画像用の指定。画像を入れないなら削除-->
<span id="hmis"></span><span id="ry"></span>
</div>

<script type="text/javascript"><!--
/*========================================================================================
リアルタイム時計  By  http://makemobile.6.tool.ms/121/（消滅）　https://tagnoheya.com/jstag/1/
改造参考サイト： http://cya.sakura.ne.jp/java/getdate.htm
★時計をCSSで装飾しやすいように改造　2021/9/17
=========================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
function Clk(){
function f(n){return n<10?"0"+n:n;}  /*■数字表記を2桁表記にする。0なら00*/
var t=new Date;

/*★共通部分ここから*/
var W=["日","月","火","水","木","金","土"];//★曜日表記。英語に変更してもOK
var Y=t.getFullYear();//■年
var Mo=t.getMonth() + 1;//■月
var Da=t.getDate();//■日
var Wd=t.getDay();//■曜日
var H=t.getHours();//■時間
var Mi=t.getMinutes();//■分
var S=t.getSeconds();//■秒
/*★共通部分ここまで*/

/*★ここから不要行は削除必須。自分で組み合わせを変えて作成しても可*/
$("hmis").innerHTML=f(H)+":"+f(Mi)+":"+f(S);//★時間分秒
$("wwd").innerHTML=W[Wd];//★曜日
$("ymoda").innerHTML=f(Y)+"/"+f(Mo)+ "/"+f(Da);//★年月日
$("ry").innerHTML="令"+f(Y-2018)+"年";//★令和年度

/*★ここまで不要行は削除必須*/
}
Clk(); setInterval(Clk,1000);	
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
実用１４-１■ リアルタイム時計・応用編 UP日時 : 2021/09/17

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