Maison > Article > interface Web > JavaScript implémente le défilement automatique des bandes de texte

JavaScript implémente le défilement automatique des bandes de texte

PHPzoriginal: 2023-05-10 09:15:36977parcourir

JavaScript est un langage de programmation très populaire. Il est principalement utilisé pour le développement Web et peut implémenter une variété de fonctions riches. Aujourd'hui, nous allons présenter comment utiliser JavaScript pour implémenter la fonction de défilement automatique de la note afin de mieux répondre aux besoins des utilisateurs.

1. Analyse des exigences

La fonction que nous devons implémenter est une barre de texte dynamique qui défile automatiquement afin que davantage de contenu puisse être présenté sur la page sans affecter la mise en page. L'implémentation spécifique doit prendre en compte les aspects suivants :

Contenu textuel de la note : nous devons définir une zone sur la page pour afficher le contenu textuel de la note, et le contenu textuel doit être chargé dynamiquement.
Vitesse de défilement de la note : Nous espérons pouvoir ajuster la vitesse de défilement de la note pour mieux répondre aux différents besoins des utilisateurs.
Sens de défilement de la note : Nous devons prendre en compte le sens de défilement de la note, qu'elle défile vers la gauche, la droite, le haut ou le bas.
Temps de séjour de la note : nous devons prendre en compte le temps de séjour de la note lorsqu'elle défile jusqu'à la fin, afin que l'utilisateur ait suffisamment de temps pour lire le contenu de la note.

2. Conception de la solution

Sur la base de l'analyse de la demande ci-dessus, nous pouvons concevoir la solution suivante :

Créer un élément HTML pour afficher le contenu textuel de la note. Nous pouvons utiliser un élément div et définir les styles CSS appropriés afin qu'il s'affiche sur la page à la position appropriée.
Utilisez JavaScript pour charger dynamiquement le contenu textuel de la note. Nous pouvons utiliser l'objet XMLHttpRequest pour lancer une requête au serveur, obtenir le contenu textuel de la note et le définir dans un élément HTML.
Définissez la vitesse de défilement de la note via JavaScript. Nous pouvons utiliser la fonction setInterval pour calculer régulièrement le décalage de position de la barre de texte et mettre à jour les informations de position de l'élément HTML pour produire un effet de défilement.
Définissez le sens de défilement de la note via JavaScript. Nous pouvons définir une variable de direction pour enregistrer la direction de défilement de la note et modifier les informations de position de la note en fonction de la valeur de la variable.
Définissez la durée de séjour de la note via JavaScript. Nous pouvons utiliser la fonction setTimeout pour définir un temps d'arrêt lorsque la note défile jusqu'à la fin, afin que l'utilisateur ait suffisamment de temps pour lire le contenu de la note.

3. Implémentation du code

Sur la base de la conception du schéma ci-dessus, nous pouvons écrire le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实现字条自动滚动</title>
<style>
#box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    color: #fff;
    background-color: #000;
    padding: 10px;
}

</style>
</head>
<body onLoad="init()">
    <div id="box"></div>
    <script>
    var direction = 1; // 1代表向左滚动，-1代表向右滚动
    var speed = 50; // 滚动速度，单位是像素/秒
    var pauseTime = 5000; // 停留时间，单位是毫秒
    var timer = null;
    var p1 = 0;
    var p2 = 0;

    function init() {
        loadText();
        setInterval(scrollText, 20);
    }

    function loadText() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("box").innerHTML = this.responseText;
                p2 = document.getElementById("box").offsetWidth + 10;
            }
        };
        xhttp.open("GET", "text.txt", true);
        xhttp.send();
    }

    function scrollText() {
        var box = document.getElementById("box");

        if (direction == 1) {
            p1 += speed / 50;
            if (p1 > p2) {
                direction = -1;
                setTimeout(function(){direction = 1;}, pauseTime);
            }
        } else {
            p1 -= speed / 50;
            if (p1 < -box.offsetWidth) {
                direction = 1;
                setTimeout(function(){direction = -1;}, pauseTime);
            }
        }

        box.style.left = p1 + "px";
    }
    </script>
</body>
</html>

Description du code :

Définissez un élément div avec l'identifiant "box" dans la page HTML pour afficher le texte. du contenu de la note. Et définissez certains styles CSS et certains événements JavaScript pour initialiser le contenu de la page lors du chargement de la page.
Définissez certaines variables en JavaScript pour enregistrer le sens de défilement, la vitesse de défilement, le temps d'arrêt, la minuterie et d'autres informations connexes de la note.
Utilisez l'objet XMLHttpRequest pour demander au serveur d'obtenir le contenu textuel de la note et de le définir dans l'élément HTML.
Utilisez la fonction setInterval pour calculer et mettre à jour régulièrement les informations de position des éléments HTML afin de produire un effet de défilement. Pendant le processus de calcul, les informations de position de l'élément HTML sont modifiées en fonction de la valeur de la variable de direction.
Lorsque vous faites défiler jusqu'à la fin, utilisez la fonction setTimeout pour attendre un certain temps afin que l'utilisateur ait suffisamment de temps pour lire le contenu de la note.

4. Résumé

Cet article présente comment utiliser JavaScript pour implémenter la fonction de défilement automatique de la note. Grâce à l'analyse des besoins, nous avons conçu une solution relativement complète et l'avons expliquée à travers des démonstrations de code réelles. J'espère que grâce à l'introduction de cet article, vous pourrez avoir une compréhension plus approfondie des applications JavaScript et être en mesure de mieux répondre aux besoins des utilisateurs dans votre travail de développement.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Est-il utile d'apprendre le javascript ?Article suivant：Est-il utile d'apprendre le javascript ?

Articles Liés

Voir plus