簡単！Javascriptでデジタル時計を表示（コピペOK）

Javascript

Javascriptで簡単にWeb上にデジタル時計の表示。
いつ使うんだろ…でもかわいい…

javascript？何それ食えるの？
私が欲しいのは画面に表示する時計だけ！
っていう方はこちらから

12時間表記

See the Pen デジタル時計（AM,PM） by s w (@s-w-the-scripter) on CodePen.

24時間表記

See the Pen デジタル時計24時間表示 by s w (@s-w-the-scripter) on CodePen.

PC画面に時計を表示したい

下記のコードを、メモ帳に保存して
いつでも、オフラインでも！PCに時計を表示できる♪

<div id="ClockDisplay" class="clock" onload="showTime()"></div>

<style>
body{
background:#b0c4de; /*背景の色*/
}
.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #555; /*時計の文字の色*/
    font-size: 200px; /*時計の大きさ*/
    letter-spacing: 7px;
}

</style>

<script>

function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    var s = date.getSeconds(); 
    
    
    h = (h < 10) ? "0" + h : h;　
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s ;
    document.getElementById("ClockDisplay").innerText = time;
    document.getElementById("ClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();
</script>

やりかた

コードをメモ帳にコピペして保存

上のコードをメモ帳にコピーしたら、
ファイルの名前を「時計.html」
ファイルの種類を「すべてのファイル」
にして保存する。

開く♪

保存したファイルが、ブラウザのマークにになっていればそのまま開けば時計が表示されます♪
メモ帳のマークのままの場合は、時計ファイルを右クリック ⇒プログラムから開く⇒ブラウザを選択すればOK✨

カスタマイズしたい時

背景の色と、時計の文字の色は、#b0c4de、#555のところを変更すると自由に変えられます。
下記カラーコードをコピペして自由に変更してください🎶
カラーコードは「WEB　カラーコード」でも簡単に検索できます。

カラーコード例

カラーネームカラーコード
b l a c k#000000
r　e　d#ff0000
p i n k#ffc0cb
g r e e n#008000
b l u e#0000ff
g r a y#808080
yellow#ffff00
lightsteelblue#b0c4de
palegreen#98fb98

なにこれ、おもしろーい！
って思った方。
WEBデザイン職に向いているかも～💖

2025年5月追記

時代はAIだよね

本当に本当に、最近はAIの進化がとめどないですね。
簡単なJavaScriptなんて、もうAIに聞けば一発でぽーんですよぽーん。覚える必要あるのか？っと思うくらいに。
ということで、かわいいデジタル時計を、Geminiに頼んでみました。

See the Pen Gemini版時計 by s w (@s-w-the-scripter) on CodePen.

どーん。
わあ、ピンクでかわいい！
これ、プロンプトは「可愛いデジタル時計を作って欲しい」
のみ。すごー。
ソースのみならず、こんな感じで解説も。

おもしろくて、なんでもお願いしたくなっちゃいます。
お試しあれ😆