了解 JavaScript 中的 Ticker 函数：它是如何工作的以及详细解释-js教程-PHP中文网

Memahami Function Ticker di JavaScript: Cara Kerja dan Penjelasan Detail

了解 JavaScript 中的 Ticker 函数

Ticker 运行文本，通常用于数字标牌应用程序或作为促销媒体。该文本可以以引人注目的方式显示新闻、广告或公告等信息。运行文本通常使用 HTML 和 CSS 实现，无需 JavaScript 即可操作，尽管许多软件也提供此功能以更好地调度和控制。

本文讨论了 JavaScript 中的股票代码功能如何工作，这是我在 Codewars 的挑战中遇到的。这个函数允许我们使用 JavaScript 创建滚动文本效果。

什么是股票代码？

Ticker 是水平移动的文本，常用于各种应用程序中显示不断更新的信息，例如最新新闻、公告或广告。这些效果可以在数字屏幕或电子公告板上找到，并且通常可以使用 HTML、CSS 和 JavaScript 来实现。

我们将在下面讨论的 JavaScript 中的股票代码功能，提供了在 Web 应用程序中创建动态运行文本效果的解决方案。

以下是我们将要讨论的股票代码功能代码：

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
}

登录后复制

股票行情功能说明

该函数有三个参数：

text：您要显示的文本。
width：想要的显示宽度，即一次显示多少个字符。
tick：文本的移位位置，决定了函数调用时将显示哪些文本。

以下是该函数中每个步骤的技术解释：

1.创建空间来换行文本

const display = ' '.repeat(width);

登录后复制

第一步，我们使用repeat()方法创建一个空字符串，其中包含与宽度一样大的空格。 Repeat() 函数将重复指定字符（在本例中为空格）宽度指定的次数。

示例：
如果宽度为 5，则显示变量将包含由 5 个空格组成的字符串 ' '。

2.在文本周围添加空格

text = display + text + display;

登录后复制

第二步，我们在文本（text）的前面和后面添加显示字符串（空格）。这确保了文本两侧都有可用空间，为文本移动（滚动）提供了一个不被切断的地方。

示例：
假设给定的文本是“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
}

登录后复制

这样，文本左右就有足够的空白，以便更流畅的移动。