Comment utiliser JavaScript pour obtenir l'effet d'affichage défilant du titre de la page tout en limitant le nombre de caractères affichés ?-js tutoriel-php.cn

Comment utiliser JavaScript pour obtenir l'effet d'affichage défilant du titre de la page tout en limitant le nombre de caractères affichés ?

WBOY

Libérer： 2023-10-19 09:57:21

original

1005 Les gens l'ont consulté

如何使用 JavaScript 实现页面标题的滚动显示效果同时限制显示字符数？

Comment utiliser JavaScript pour obtenir l'effet d'affichage défilant du titre de la page tout en limitant le nombre de caractères affichés ?

Dans le développement Web, nous avons souvent besoin d'attirer l'attention des utilisateurs grâce à des effets dynamiques. Parmi eux, l'effet d'affichage défilant du titre de la page est une méthode courante et concise. Cet article explique comment utiliser JavaScript pour obtenir l'effet d'affichage défilant du titre de la page tout en limitant le nombre de caractères affichés.

Tout d'abord, nous devons préciser que le titre de la page est défini par la balise <title> dans le navigateur. Par conséquent, nous devons obtenir et modifier le contenu de cette balise via JavaScript. Voici un exemple de code pour obtenir l'effet d'affichage défilant : <title> 标签定义的。因此，我们需要通过 JavaScript 来获取并修改这个标签的内容。以下是实现滚动显示效果的代码示例：

<!DOCTYPE html>
<html>
<head>
<script>
  // 获取页面标题
  var title = document.title;
  // 每次显示的字符数
  var charCount = 0;
  // 定时器变量
  var titleScroll;

  // 定义滚动显示标题的函数
  function scrollTitle() {
    // 截取标题的前面部分
    var prefix = title.substring(0, charCount++);
    // 修改页面标题
    document.title = prefix;
    // 如果还没有显示完整标题，继续滚动
    if (charCount <= title.length) {
      titleScroll = setTimeout(scrollTitle, 200);
    } else {
      // 显示完整标题后，重置字符计数器并重新开始滚动
      charCount = 0;
      titleScroll = setTimeout(scrollTitle, 2000);
    }
  }

  // 页面加载后开始滚动显示标题
  window.onload = function() {
    scrollTitle();
  }

  // 当页面失去焦点时停止滚动，获得焦点时恢复滚动
  window.onblur = function() {
    clearTimeout(titleScroll);
  }
  window.onfocus = function() {
    scrollTitle();
  }
</script>
</head>
<body>
<!-- 在这里可以放置页面的内容 -->
</body>
</html>

Copier après la connexion

上述代码中，我们定义了一个 scrollTitle 函数，用于实现标题的滚动显示效果。该函数通过递归调用 setTimeout 函数实现定时滚动。在每次滚动时，我们使用 substring 方法来截取标题的前面部分，并将其赋值给 <title> 标签，实现标题的滚动效果。当显示完整标题后，我们会将字符计数器重置为0，并在一定时间后重新开始滚动。

接下来，我们需要实现限制显示字符数的功能。一种简单的方式是修改 scrollTitle 函数，在对标题进行截取前，先限制标题的字符数。以下是修改后的代码示例：

  // 定义滚动显示标题的函数
  function scrollTitle() {
    // 截取指定长度的标题
    var truncatedTitle = title.substring(0, charCount);
    // 修改页面标题
    document.title = truncatedTitle;
    // 如果还没有显示完整标题，继续滚动
    if (charCount <= title.length) {
      charCount++;
      titleScroll = setTimeout(scrollTitle, 200);
    } else {
      // 显示完整标题后，重置字符计数器并重新开始滚动
      charCount = 0;
      titleScroll = setTimeout(scrollTitle, 2000);
    }
  }

Copier après la connexion

在上述代码中，我们使用 substring 方法截取指定长度的标题，并将其赋值给 <title> 标签，实现限制字符数的效果。每次滚动时，我们将字符计数器增加 1，并在递归调用中判断是否还有剩余字符需要滚动显示。

通过以上代码示例，我们可以实现页面标题的滚动显示效果，并且限制显示的字符数。你可以将以上代码拷贝到 HTML 文件中，并在合适的位置放置页面的内容，例如在 <body>rrreee

Dans le code ci-dessus, nous définissons une fonction scrollTitle pour obtenir l'effet d'affichage défilant du titre. Cette fonction implémente le défilement programmé en appelant récursivement la fonction setTimeout. Chaque fois que nous faisons défiler, nous utilisons la méthode substring pour intercepter la partie avant du titre et l'attribuer à la balise <title> pour obtenir l'effet de défilement du titre. . Lorsque le titre complet est affiché, nous remettons le compteur de caractères à 0 et reprenons le défilement après un certain temps. 🎜🎜Ensuite, nous devons implémenter la fonction de limitation du nombre de caractères affichés. Un moyen simple est de modifier la fonction scrollTitle pour limiter le nombre de caractères dans le titre avant de le tronquer. Ce qui suit est un exemple de code modifié : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode substring pour intercepter le titre de la longueur spécifiée et l'attribuer au

<title> code> balise , pour obtenir l'effet de limiter le nombre de caractères. Chaque fois que nous faisons défiler, nous augmentons le compteur de caractères de 1 et déterminons s'il reste des caractères à faire défiler lors d'un appel récursif. 🎜🎜Avec l'exemple de code ci-dessus, nous pouvons obtenir l'effet d'affichage défilant du titre de la page et limiter le nombre de caractères affichés. Vous pouvez copier le code ci-dessus dans un fichier HTML et placer le contenu de la page à l'emplacement approprié, par exemple en ajoutant d'autres éléments ou du texte dans la balise <body>. Lorsque la page est chargée, le titre de la page sera affiché dans la barre de titre du navigateur de manière défilante. Dans le même temps, vous pouvez modifier des paramètres tels que la vitesse de défilement, l'intervalle de défilement et la limite de caractères dans le code selon vos besoins pour obtenir de meilleurs effets d'affichage de défilement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!