Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptで現在の年を自動的に更新する方法

フッターで現在の年を自動的に更新することは、最も簡単な方法の1つです。残念ながら、多くのウェブサイトの所有者は、著作権上の理由と、ウェブサイトが最新であることをユーザーに知らせるために、今年を表示することが重要であることを知りません。

これは、ほとんどの古いWebサイト、および一部の最新のサイトでさえ、HTMLがフッターでどのように表示されるかを示しています。

<span>© 2018 Company Name</span>
  • ©記号を使用した著作権侵害の申し立て。
  • 今年。
  • 会社名。

この静的タイムスタンプアプローチを使用することにより、Webサイトの所有者は、表示されている年を毎年手動で編集する必要があります。これは実用的ではありません。

すべてのWebサイトからはほど遠い、フッター情報を編集するための簡単なアクセスを備えたユーザーフレンドリーなUIダッシュボードがあります。したがって、Webサイトの所有者は、自分のHTMLファイルを自分で編集するか、誰かを雇って編集する必要があります。

これは時間とリソースの無駄です。

タイムスタンプが古くなるとブランドに悪影響を与える可能性があります

残念ながら、今年を表示しないと、たとえそうでなくても、Webサイトが古くなったように見えます。今日のウェブサイトにアクセスしたが、そのウェブサイトの現在の年が2015年である場合、それは何があなたをするのか 思いますか?

丁度。ウェブサイトがまだアクティブかどうか疑問に思います。

今日以降、自分のサイトやクライアントのWebサイトでこの問題を心配する必要はありません。

JavaScriptのgetFullYear()メソッドを使用して現在の年を表示する

上記のHTMLで見た静的なタイムスタンプを使用する代わりに、ネイティブのJavaScript日付メソッドgetFullYear():を追加して、動的なタイムスタンプを作成しましょう。 フッターに。

まず、次のコードをブラウザコンソール(またはコンソール付きのテキストエディタ)に追加して、テストできるようにします。

document.write(new Date().getFullYear());

Enterキーを押すと、ブラウザウィンドウの左上隅に現在の日付が表示されます。

JavaScriptで現在の年を自動的に更新する方法

このCodePenの例の中で関数内のコードを見ることができます。コンソールウィンドウを見てください。

動作することがわかったので、getFullYear()を見てみましょう。 上からコードを記述し、以前のフッターHTML内にラップします:

<span>
  &copy;<script>document.write(new Date().getFullYear());</script> Company Name
</span>

結果:

JavaScriptで現在の年を自動的に更新する方法

おめでとうございます。年のタイムスタンプを最新の状態に保つことを心配する必要はありません。JavaScriptがここから引き継ぎます。

元の著作権の年と現在の年を表示する

現在の年と会社を登録した年の両方を表示したい場合があります。これは、著作権侵害の申し立ての年を強調するためのものである可能性があります。問題ない。開始年を2016年にしたい場合は、2016-を追加するだけです。 上記のコードでは、次のようになります:

<span>
  &copy; 2016-<script>document.write(new Date().getFullYear());</script> Company
  Name
</span>

  1. JavaScriptでテキストを切り替える方法は?

    JavaScriptでテキストを切り替えるためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana,

  2. JavaScriptを使用して現在の要素にアクティブなクラスを追加するにはどうすればよいですか?

    JavaScriptを使用して現在の要素にアクティブなクラスを追加するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    .btn {       border: none;       outline: non