◀︎ J ▶︎

<html lang="ja">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<style>
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
svg{margin-top:-50px;
margin-left:230px}
path{fill:#cdefff;}
.コンポーネント{psition:relative;
width:500px;
height:320px;
background-color:#123456;
margin:100px auto;
display:block;
text-align:center;
border:1px solid #cdefff;
border-radius:20px;}
.年月日{font-size:30px;
margin-top:50px;
margin-bottom:-50px;}
.時間{font-size:80px;}
.タイム{font-family:"Share Tech Mono",monospace;
color:#cdefff;
text-shadow:0 0 40px #abcdef;}
path{fill:#cdefff;}
a:hover path{fill:#00ff00;}
.ストローク_ダッシュ{stroke:#cdefff;
stroke-width:1;
fill:#123456;
stroke-dasharray:60;
stroke-dashoffset:60;
animation:line 2s linear forwards;}
@keyframes line{to{stroke-dashoffset:0;}}
body{background-color:#123456;}
</style>

<div class="コンポーネント">
<div class="タイム">
<p class="年月日"></p>
<p class="時間"></p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 200 200">
<a xlink:href="Sample_Coding_136-K.html"><path class="ストローク_ダッシュ"d="M12,4c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4.1,9-9S16.9,4,12,4z M12,20c-3.8,0-7-3.2-7-7s3.2-7,7-7s7,3.2,7,7S15.8,20,12,20z"/>
<path class="ストローク_ダッシュ"d="M13,8h-2v4H7v2h4v4h2v-4h4v-2h-4V8z M20.3,6.7l-3-3l1.4-1.4l3,3L20.3,6.7z M5.3,2.3l1.4,1.4l-3,3L2.3,5.3L5.3,2.3z"/></a>
</svg>
</div>

<script>!function(井){let 天={};function 栄(有){if(天[有])return 天[有].exports;let 王=天[有]={愛:有,得:!1,exports:{}};return 井[有].call(王.exports,王,王.exports,栄),王.得=!0,王.exports}栄.夢=井,栄.市=天,栄.出=function(井,天,有){栄.王(井,天)||Object.defineProperty(井,天,{enumerable:!0,get:有})},栄.有=function(井){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(井,Symbol.toStringTag,{value:"文字類"}),Object.defineProperty(井,"mp3_音源",{value:!0})},栄.天=function(井,天){if(1&天&&(井=栄(井)),8&天)return 井;if(4&天&&"object"==typeof井&&井&&井.mp3_音源)return 井;let 有=Object.create(null);if(栄.有(有),Object.defineProperty(有,"default",{enumerable:!0,value:井}),2&天&&"string"!=typeof 井)for(let 王 in 井)栄.出(有,王,function(天){return e[天]}.bind(null,王));return 有},栄.栄=function(井){let 天=井&&井.mp3_音源?function(){return 井.default}:function(){return 井};return 栄.出(天,"亜",天),天},栄.王=function(井,天){return Object.prototype.hasOwnProperty.call(井,天)},栄.p="",栄(栄.s=0)}([function(井,天){setInterval((function(){let 井=new Date,天=井.getFullYear(),栄=井.getMonth()+1,有=井.getDate(),王=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][井.getDay()],市=井.getHours(),行=井.getMinutes(),亜=井.getSeconds();栄=栄<10?"0"+栄:栄,有=有<10?"0"+有:有,市=市<10?"0"+市:市,行=行<10?"0"+行:行,亜=亜<10?"0"+亜:亜;let 愛="".concat(天,".").concat(栄,".").concat(有,"(").concat(王+")"),得="".concat(市,":").concat(行,":").concat(亜);document.querySelector(".年月日").innerText=愛,document.querySelector(".時間").innerText=得}))}]);</script>

</html>