了解 JavaScript 中的 Ticker 函數(shù)

Ticker 運(yùn)行文本，通常用于數(shù)字標(biāo)牌應(yīng)用程序或作為促銷媒體。該文本可以以引人注目的方式顯示新聞、廣告或公告等信息。運(yùn)行文本通常使用 HTML 和 CSS 實(shí)現(xiàn)，無(wú)需 JavaScript 即可操作，盡管許多軟件也提供此功能以更好地調(diào)度和控制。

本文討論了 JavaScript 中的股票代碼功能如何工作，這是我在 Codewars 的挑戰(zhàn)中遇到的。這個(gè)函數(shù)允許我們使用 JavaScript 創(chuàng)建滾動(dòng)文本效果。

什么是股票代碼？

Ticker 是水平移動(dòng)的文本，常用于各種應(yīng)用程序中顯示不斷更新的信息，例如最新新聞、公告或廣告。這些效果可以在數(shù)字屏幕或電子公告板上找到，并且通?？梢允褂?HTML、CSS 和 JavaScript 來(lái)實(shí)現(xiàn)。

我們將在下面討論的 JavaScript 中的股票代碼功能，提供了在 Web 應(yīng)用程序中創(chuàng)建動(dòng)態(tài)運(yùn)行文本效果的解決方案。

以下是我們將要討論的股票代碼功能代碼：

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
}

股票行情功能說(shuō)明

該函數(shù)有三個(gè)參數(shù)：

• text：您要顯示的文本。
• width：想要的顯示寬度，即一次顯示多少個(gè)字符。
• tick：文本的移位位置，決定了函數(shù)調(diào)用時(shí)將顯示哪些文本。

以下是該函數(shù)中每個(gè)步驟的技術(shù)解釋：

---

1.創(chuàng)建空間來(lái)?yè)Q行文本

const display = ' '.repeat(width);

第一步，我們使用repeat()方法創(chuàng)建一個(gè)空字符串，其中包含與寬度一樣大的空格。 Repeat() 函數(shù)將重復(fù)指定字符（在本例中為空格）寬度指定的次數(shù)。

示例：
如果寬度為 5，則顯示變量將包含由 5 個(gè)空格組成的字符串 ' '。

2.在文本周圍添加空格

text = display + text + display;

第二步，我們?cè)谖谋荆╰ext）的前面和后面添加顯示字符串（空格）。這確保了文本兩側(cè)都有可用空間，為文本移動(dòng)（滾動(dòng)）提供了一個(gè)不被切斷的地方。

示例：
假設(shè)給定的文本是“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
}

這樣，文本左右就有足夠的空白，以便更流暢的移動(dòng)。

3.計(jì)算文本移動(dòng)位置

const display = ' '.repeat(width);

第三步，我們使用模運(yùn)算符（%）來(lái)確?？潭戎翟谟行Х秶鷥?nèi)，并且不超過(guò)已被空格包裹的文本長(zhǎng)度。

text.length - width 值給出了換行文本的總長(zhǎng)度（包括空格）減去我們要顯示的顯示寬度（寬度）。這確保了勾號(hào)指定的文本移位不會(huì)超過(guò)可顯示的文本長(zhǎng)度。

示例：
如果添加空格后的文本長(zhǎng)度為15（例如'Hello'），寬度為5，那么text.length - width就變成10。也就是說(shuō)，我們只需要保證刻度在范圍內(nèi)即可0 到 9。這可以確保文本的移動(dòng)始終有效，不會(huì)丟失任何部分。

4.檢索要顯示的子字符串

text = display + text + display;

在最后一步中，我們使用 slice() 方法獲取文本字符串的一部分，從刻度位置開(kāi)始到刻度寬度位置。 slice() 函數(shù)返回字符串中與該位置對(duì)應(yīng)的部分。

示例：
例如，如果tick = 3且width = 5，則代碼slice(3, 8)將從字符串“Hello”生成子字符串“Hello”。

通過(guò)這種方式，我們顯示了長(zhǎng)度與寬度匹配的部分文本。每次使用不同的刻度值調(diào)用此函數(shù)時(shí)，顯示的文本都會(huì)移動(dòng)，從而創(chuàng)建移動(dòng)或滾動(dòng)效果。

---

使用股票代碼功能的示例

讓我們看一下在代碼中使用此函數(shù)的示例：

'     Hello     '

發(fā)生的過(guò)程是：

1. 顯示 = ' '（5 個(gè)空格）。
2. 修改后的文本：“Hello World”。
3. 刻度值 = 3，換行后文本的長(zhǎng)度為 18。當(dāng)寬度 = 5 時(shí)，我們知道刻度的范圍可以從 0 到 13。
4. slice(3, 8) 函數(shù)將返回子字符串 'Hello'。

如果我們?cè)谙麓握{(diào)用時(shí)增加刻度值，文本將進(jìn)一步移動(dòng)，顯示的文本部分也會(huì)發(fā)生變化。

文字如何移動(dòng)？

創(chuàng)建移動(dòng)效果是因?yàn)槊看挝覀冋{(diào)用ticker函數(shù)時(shí)，tick值都會(huì)改變。隨著刻度值的增加，顯示的文本部分也會(huì)發(fā)生變化。這會(huì)產(chǎn)生移動(dòng)效果，因?yàn)榭潭染€會(huì)動(dòng)態(tài)滾動(dòng)文本。

為了進(jìn)一步測(cè)試這種效果，我們可以通過(guò)定期增加刻度值來(lái)循環(huán)調(diào)用ticker函數(shù)，例如使用setInterval()每隔幾秒更新一次顯示。

---

如果您有興趣嘗試類似的挑戰(zhàn)，我通過(guò) Codewars 發(fā)現(xiàn)了這個(gè)功能，這是提高您的 JavaScript 編程技能的有趣練習(xí)。

祝你好運(yùn)，我希望這篇文章有助于理解 JavaScript 中的股票行情效果如何工作！

以上是了解 JavaScript 中的 Ticker 函數(shù)：它是如何工作的以及詳細(xì)解釋的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！