コピーライトなどの年号をJavaScriptで自動更新する方法

Webサイトのフッターのコピーライト表記など、今年の年を表示したい場合がありますよね。

HTMLでベタ書きしてもよいのですが、そうすると毎年書き直す必要があります。

そこで今回の記事では、JavaScriptで現在の年を自動更新する方法を紹介します!

サイト上に現在の年を表示する必要がある場合は、ぜひ参考にしてみてください。

目次

現在の年を自動更新する実装コードの紹介と解説

さっそく実装コードを紹介していきます。

ここでは、フッターのコピーライト部分の年号を更新する場合を想定しています。

まずはHTMLから見ていきましょう。

<footer>
  <p>© 2020 - <span id="current-year"></span> Your site name</p>
</footer>

空のspanタグを用意し、current-yearというidを付与します。

この空タグをJavaScriptで取得し、中の年号を自動挿入します。

2020の部分は、著作物の発行年を記入してください。

続いてはJavaScriptのコードを見ていきます。

document.getElementById("current-year").innerText = new Date().getFullYear();

まずHTML上のcurrent-yearというidがついた要素を探します。

現在の年はDateオブジェクトのgetFullYearメソッドで取得できるので、値をinnerTextで書き換えてあげることで完成です!

これらのコードを実行すると、以下のような結果になります。

実装結果
© 2020 – Your site name

空のspanタグがある箇所に、現在の年が表示されているのが確認できたかと思います。

これでコードの解説は終わりです。

【1行で実装可能】コピーライトなどの年号をJavaScriptで自動更新する方法

JavaScriptで現在の年を自動更新する方法を紹介しました。

毎年コードを書き換える必要がなくなるので、サイト上に現在年を表示したい場合はぜひこの方法を試してみてください。

今回使用したDateオブジェクトについては、別記事で解説してますのでそちらもどうぞ。

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次