menu

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

H&Rブログ > JavaScript > Webサイトに現在時刻を載せる方法|超絶簡単JavaScript

Webサイトに現在時刻を載せる方法|超絶簡単JavaScript

JavaScript

どうもRyokutyaです。

今回はWebサイトに現在の時刻を載せる方法を紹介します。とても簡単なので自分のサイトに時刻を付けたい方はコピペして使ってみてください。
下の方でコードの説明もしています。

現在時刻の作り方・表示のさせ方

現在時刻を表示させる方法はJavaScriptを使います。
まずは例として適当にhtmlでページを作り、現在時刻を表示させる場所を決めます。

<body>
  <p>現在の時刻:<span id="nowTime"></span></p>

  <script src="js/script.js"&g;t</script>
</body>


赤枠のspanタグの中身にはまだなにも表示されません、JavaScriptで加えていきます。そのためにspanタグにはidを付けています、このidに掛かるようにJavaScriptを書いていきます。

現在時刻を表示するためのコード

先程のhtmlの<span>~</span>に掛かるJavaScriptのコードを載せます。

function currentTime(){
    const now=new Date;//dateオブジェクトを生成
    let year=now.getFullYear();//年を取得
    let month=now.getMonth();//月を取得(0~11であることに注意)
    let date=now.getDate();//日を取得
    let hours=now.getHours();//時を取得
    let mins=now.getMinutes();//分を取得
    let secs=now.getSeconds();//秒を取得

    let nowTime=`${year}年${month+1}月${date}日 ${hours}時${mins}分${secs}秒`
    document.getElementById('nowTime').textContent=nowTime;
    refresh();
}

function refresh(){
    setTimeout(currentTime,1000);
}

currentTime();


これをコピペするとこんな感じに表示されます。

↓で動いている動画を載せています

更に詳しく解説

では解説していきます。
まずhtmlです

<body>
  <p>現在の時刻:<span id="nowTime"></span></p>

  <script src="js/script.js"></script>
</body>


このidの付いている<span id=”nowTime”>~</span>は、中身をJavaScriptで作成するので空欄にしておきます。これは簡単なので説明割愛
続いてJavaScript

function currentTime(){
    const now=new Date;//dateオブジェクトを生成
    let year=now.getFullYear();//年を取得
    let month=now.getMonth();//月を取得(0~11であることに注意)
    let date=now.getDate();//日を取得
    let hours=now.getHours();//時を取得
    let mins=now.getMinutes();//分を取得
    let secs=now.getSeconds();//秒を取得

    let countTime=`${year}年${month+1}月${date}日 ${hours}時${mins}分${secs}秒`
    document.getElementById('nowTime').textContent=countTime;
    refresh();
}

function refresh(){
    setTimeout(currentTime,1000);
}

currentTime();

まずgetElementById()を使って特定のidをもつhtmlの要素を指定します。
()の中には自分で決めたid名を入れます。(今回はnowTimeです。この時’id名’のようにシングルクォーテーションで囲うのを忘れないようにしましょう。)

document.getElementById(‘nowTime’)とすることで、<span id=”nowTime”></span>を選択しています。
console.log( document.getElementById(‘nowTime’) )とすることで検証画面で確認できます。(検証の見方はF12キーか、右クリックで出てきたウィンドウの[検証]をクリック)
<span id=”nowTime”>~</span>の中に文字を表示させるためにJavaScriptのコードtextContentを使います。
さきほど書いた文(document.getElementById(‘nowTime’)の後ろに.textContent=○○とすることで、○○の部分をspanタグの中に記入することができます。
textContentでコードを書いたとき、実際のページで検証し確認するとhtmlとしてコードが追加されています。確認してみましょう。


これで現在時刻がリアルタイムで刻まれていくと思います。
続いてJavaScriptの詳細を説明します。

JavaScriptの詳細

function currentTime(){
    const now=new Date;//dateオブジェクトを生成
    let year=now.getFullYear();//年を取得
    let month=now.getMonth();//月を取得(0~11であることに注意)
    let date=now.getDate();//日を取得
    let hours=now.getHours();//時を取得
    let mins=now.getMinutes();//分を取得
    let secs=now.getSeconds();//秒を取得

    let countTime=`${year}年${month+1}月${date}日 ${hours}時${mins}分${secs}秒`
    document.getElementById('nowTime').textContent=countTime;
    refresh();
}

function refresh(){
    setTimeout(currentTime,1000);
}

currentTime();

基本的にJavaScriptにはじめから登録してあるDateオブジェクトを使用します。
ですので、年、月、日、時、分、秒はこう書けば取得できるんだなくらいでわかってもらえればOKです。
月だけは0~11の12個の数字で表される点に注意してください。
実際の月よりも1つ小さい数字で表示されます。(6月は5で表されます)
そのため月だけ+1して使用するようにしてください。
詳しく知りたい方は、JavaScript Dateオブジェクトなどで検索してみてください。

let countTime=`${year}年${month+1}月${date}日 ${hours}時${mins}分${secs}秒`について
countTime(変数)にspanタグに入れたい文章を代入しています。
`(shift + @)で囲うと文字の連結を使用しなくとも式と文字を一回で書くことができます。`の中で${}で囲うと文字ではなく式として認識されます。
文字の連結を使って書くこもできます。
year+’年’+month+1+’月’+date+’日’+hours+’時’+mins+’分’+secs+’秒’

function refresh()について
refresh(関数)を定義しています。
中身はsetTimeout(currentTime,1000);となっています。
setTimeoutはsetTimeout(関数名,ミリ秒);とすることで指定された時間(ミリ秒)が経過すると1回だけ処理を実行します
今回のcodeで言えばcurrentTimeという関数を1秒(1000ミリ秒)が経過すると処理を1回処理するcodeを書いています。
currentTimeの最後にrefreshを呼び出しています。
最後の一文でcurrentTimeを呼び出しています。

流れとしては、
①currentTimeが実行されます。
②currenTimeの最後でrefreshが呼び出され実行されます。
③refreshが実行されるため、1秒経過するとcurrentTImeが実行されます。
④currenTimeの最後でrefreshが呼び出され実行されます。
以降③と④が永遠に繰り返されるため現在時刻を1秒おきに取得することになり現在時刻を表示することができるというわけです。

おまけ:cssを使ってレイアウトをカスタムしてみる

↑では表示させるだけでしたが、cssを使って見た目を変えることもできます。


例えばspanのid=nowTimeにこれを付けるとこんな感じ。
これだけだと1文全てにcssが掛かるので、時・分・秒を別々にレイアウトを変えるときはspanタグの中身を分割にしたりする必要があると思います。
今回の記事ではここまで。また色々なレイアウトを実験してみた際に詳細を書きたいと思います。

他にも多ジャンルに記事を書いてますので良ければご覧ください。ご訪問ありがとうございました。

ゲーム
ダークソウル2ブログ
ダークソウル3ブログ
PC関連
レビュー
修理
車関連

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ