Comment implémenter la fonction barrage dans js_Comment implémenter la fonction barrage dans js-js tutoriel-php.cn

Comment implémenter la fonction de barrage en js

小老鼠

Libérer： 2024-03-04 17:05:55

original

1177 Les gens l'ont consulté

Méthode d'implémentation : 1. Créez un fichier HTML ; 2. Ajoutez la structure du code HTML ; 3. Utilisez les balises div, input et bouton dans la balise body pour concevoir la zone d'affichage de l'effet, la zone de saisie et le bouton de soumission du barrage sur le page ; 4. Ajoutez une balise de script et écrivez du code js pour obtenir l'effet de barrage ; 5. Visualisez l'effet de conception via le navigateur.

Comment implémenter la fonction de barrage en js

Comment implémenter la fonction barrage dans js

Méthode de fonctionnement spécifique :

1. Créez d'abord un fichier html.

2. Ajoutez une structure de code HTML dans le fichier HTML.

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
        <title>弹幕功能</title>
    </head>
    <body>
    </body>
</html>

Copier après la connexion

3. Utilisez ensuite les balises div, input et bouton dans la balise body de la structure du code HTML pour concevoir respectivement une zone d'affichage d'effet, une zone de saisie et un bouton de soumission de barrage pour la page.

<div id="box" class="box"></div>
<input type="text" id="txt" />
<button onclick="send()">发送弹幕</button>

Copier après la connexion

4. Ajoutez des balises de script dans les balises html de la structure html et écrivez du code js pour obtenir l'effet de barrage.

<style>
   function $(str) {
return document.getElementById(str);
}
function send() {
var word = $(&#39;txt&#39;).value;
var span = document.createElement(&#39;span&#39;);
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = &#39;absolute&#39;;
span.style.top = top + "px";
span.style.color = color;
span.style.left = &#39;500px&#39;;
span.style.whiteSpace = &#39;nowrap&#39;;
var nub = (Math.random() * 10) + 1;
span.setAttribute(&#39;speed&#39;, nub);
span.speed = nub;
span.innerHTML = word;
$(&#39;box&#39;).appendChild(span);
$(&#39;txt&#39;).value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $(&#39;box&#39;).children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
}
}
  </style>

Copier après la connexion

5. Enfin, vous pouvez lire le fichier html via le navigateur pour voir l'effet de conception.

L'exemple de code complet est le suivant :



    

        弹幕功能
    
    
      <div id="box" class="box"></div>
<input type="text" id="txt" />
<button onclick="send()">发送弹幕</button>
    
    <script>
      function $(str) {
return document.getElementById(str);
}
function send() {
var word = $(&#39;txt&#39;).value;
var span = document.createElement(&#39;span&#39;);
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = &#39;absolute&#39;;
span.style.top = top + "px";
span.style.color = color;
span.style.left = &#39;500px&#39;;
span.style.whiteSpace = &#39;nowrap&#39;;
var nub = (Math.random() * 10) + 1;
span.setAttribute(&#39;speed&#39;, nub);
span.speed = nub;
span.innerHTML = word;
$(&#39;box&#39;).appendChild(span);
$(&#39;txt&#39;).value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $(&#39;box&#39;).children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
}
}
    </script>

Copier après la connexion

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!