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

JavaScriptで点滅テキストを作成する方法【blink()メソッドの使い方】

Webページ上で点滅するテキストを作成したい場合、JavaScriptのblink()メソッドを使用する方法があります。このメソッドを呼び出すと、文字列がHTMLのBLINKタグで囲まれているかのように点滅して表示されます。

注意： HTMLの<blink>タグはすでに非推奨（廃止予定）となっており、すべてのブラウザで正常に動作するとは限りません。blink()メソッドも同様に非標準の機能であるため、実務での使用には注意が必要です。

blink()メソッドの基本的な使い方

blink()メソッドは、Stringオブジェクトに対して呼び出すことで、その文字列を点滅表示させるためのHTMLタグで囲んだ結果を返します。以下のコードを実行して、実際に点滅テキストがどのように表示されるか確認してみましょう。

サンプルコード

<html>
   <head>
      <title>JavaScript String blink() Method</title>
   </head>

   <body>
      <script>
         var str = new String("Demo Text");
         document.write(str.blink());
         document.write("<br><br> Note: HTML <blink> tag deprecated and is not expected to work in every browser.")
      </script>
   </body>
</html>

現代的な代替手段：CSSアニメーションの活用

blink()メソッドは標準仕様から外れているため、現在のWeb開発ではCSSアニメーションを使った点滅表現が推奨されています。以下のように、CSSの@keyframesとanimationプロパティを組み合わせることで、ブラウザに依存せず安定した点滅効果を実現できます。

<style>
.blink {
  animation: blink 1s step-start infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
</style>

<p class="blink">点滅するテキスト</p>

この方法であれば、JavaScriptに頼らずHTMLとCSSだけで点滅テキストを実装でき、パフォーマンス面でも優れています。古いブラウザ対応が不要な場合は、CSSアニメーションを採用することをおすすめします。

  1. JavaScriptでアニメーションを作成する方法をわかりやすく解説

    JavaScriptを使えば、要素を滑らかに動かしたり変形させたりするアニメーションを簡単に実装できます。この記事では、setInterval()を活用したアニメーションの基本的な作り方を、実際に動くサンプルコードとともに詳しく解説します。 JavaScriptアニメーションの基本的な仕組み JavaScriptでアニメーションを作る場合の基本は、「一定間隔ごとに要素のスタイルを少しずつ変更する」という考え方です。具体的には次の手順で実装します。 setInterval()で指定間隔（例：10ミリ秒）ごとに関数を繰り返し実行する 関数の中で位置や形状などのスタイル値を少しずつ更新する 目標の

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="