JavaScript のティッカー関數(shù)を理解する

ティッカーは、デジタル サイネージ アプリケーションやプロモーション メディアとしてよく使用されるテキストを?qū)g行します。このテキストには、ニュース、広告、お知らせなどの情報を注意を引く方法で表示できます。実行テキストは通常??、HTML と CSS で実裝され、JavaScript なしで操作できますが、多くのソフトウェアでも、スケジュールと制御を向上させるためにこの機能が提供されています。

この記事では、JavaScript でティッカー関數(shù)がどのように機能するかについて説明します。これは Codewars のチャレンジで見つけました。この関數(shù)を使用すると、JavaScript を使用してスクロール テキスト効果を作成できます。

ティッカーとは何ですか?

ティッカーは水平に移動するテキストであり、最新のニュース、お知らせ、広告など、継続的に更新される情報を表示するためにさまざまなアプリケーションでよく使用されます。これらの効果はデジタル畫面や電子掲示板で見ることができ、通常は HTML、CSS、JavaScript を使用して実裝できます。

以下で説明する JavaScript のティッカー関數(shù)は、Web アプリケーションで動的に実行されるテキスト効果を作成するためのソリューションを提供します。

次に説明するティッカー関數(shù)のコードを示します。

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

ティッカー機能の説明

この関數(shù)には 3 つのパラメータがあります:

• text: 表示するテキスト。
• width: 希望する表示幅、つまり一度に表示される文字數(shù)。
• ティック: テキストのシフト位置。関數(shù)が呼び出されたときにどのテキストが表示されるかを決定します。

以下は、この関數(shù)の各ステップの技術(shù)的な説明です:

---

1.テキストを折り返すスペースを作成する

const display = ' '.repeat(width);

最初のステップでは、repeat() メソッドを使用して、幅と同じ大きさのスペースを含む空の文字列を作成します。 repeat() 関數(shù)は、指定された文字 (この場合はスペース) を width で指定された回數(shù)繰り返します。

例:
幅が 5 の場合、表示変數(shù)には 5 つのスペースで構(gòu)成される文字列 ' ' が含まれます。

2.テキストの周囲にスペースを追加する

text = display + text + display;

2番目のステップでは、テキスト(テキスト)の前後に表示文字列(スペース)を追加します。これにより、テキストの両側(cè)に空きスペースが確保され、テキストが切り取られることなく移動 (スクロール) できる場所が提供されます。

例:
指定されたテキストが「Hello」で幅が 5 であるとします。この行の後のテキストは次のようになります:

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

これにより、テキストの左右に十分な空きスペースができ、スムーズな移動が可能になります。

3.テキスト移動位置の計算

const display = ' '.repeat(width);

3 番目のステップでは、係數(shù)演算子 (%) を使用して、ティック値が有効な範囲內(nèi)にあり、スペースで囲まれたテキストの長さを超えないことを確認します。

text.length - width の値は、折り返されたテキストの全長 (スペースを含む) から、表示したい表示の幅 (width) を引いたものになります。これにより、目盛りで指定されたテキストのシフトが表示可能なテキストの長さを超えないようになります。

例:
スペースを追加した後のテキストの長さが 15 (たとえば、' Hello ')、幅が 5 の場合、 text.length - width は 10 になります。つまり、目盛りが範囲內(nèi)にあることを確認するだけで済みます。 0 ～ 9。これにより、テキストの動きが欠落することなく常に有効であることが保証されます。

4.表示する部分文字列を取得します

text = display + text + display;

最後のステップでは、slice() メソッドを使用して、目盛りの位置から目盛りの幅の位置までのテキスト文字列の一部を取得します。 lice() 関數(shù)は、その位置に対応する文字列の部分を返します。

例:
たとえば、tick = 3 および width = 5 の場合、コード slide(3, 8) は文字列 ' Hello ' から部分文字列 'Hello' を生成します。

このようにして、幅に合わせた長さのテキストの一部を表示します。この関數(shù)が異なるティック値で呼び出されるたびに、表示されるテキストが移動し、動きやスクロール効果が生まれます。

---

ティッカー機能の使用例

コードでこの関數(shù)を使用する例を見てみましょう:

'     Hello     '

発生するプロセスは次のとおりです:

1. display = ' ' (スペース 5 個)。
2. 変更されたテキスト:「Hello World」。
3. 目盛りの値 = 3、折り返し後のテキストの長さは 18 です。幅 = 5 の場合、目盛りの範囲は 0 ～ 13 であることがわかります。
4. slice(3, 8) 関數(shù)は部分文字列 'Hello' を返します。

次の呼び出しで目盛り値を増やすと、テキストがさらに移動し、表示されるテキストの部分が変更されます。

テキストはどのように移動できますか?

ティッカー関數(shù)を呼び出すたびにティック値が変化するため、動きのエフェクトが作成されます。目盛りの値が増加すると、表示されるテキストの部分も変化します。これにより、目盛りがテキストを動的にスクロールするため、動きの効果が得られます。

この効果をさらにテストするには、定期的にティック値を増やしてループ內(nèi)でティッカー関數(shù)を呼び出します。たとえば、setInterval() を使用して數(shù)秒ごとに表示を更新します。

---

同様のチャレンジに興味がある場合は、私は Codewars を通じてこの関數(shù)を発見しました。これは、JavaScript プログラミング スキルを向上させる楽しい練習(xí)になります。

頑張ってください。この記事が JavaScript でのティッカー効果の仕組みを理解するのに役立つことを願っています。

以上がJavaScript のティッカー関數(shù)を理解する: その仕組みと詳細な説明の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。