Maison > Article > interface Web > Comment implémenter la fonction de barrage en js
Comment implémenter la fonction de barrage en js
- 小老鼠original
- 2024-03-04 17:05:551102parcourir
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 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>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>
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 = $('txt').value;
var span = document.createElement('span');
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 = 'absolute';
span.style.top = top + "px";
span.style.color = color;
span.style.left = '500px';
span.style.whiteSpace = 'nowrap';
var nub = (Math.random() * 10) + 1;
span.setAttribute('speed', nub);
span.speed = nub;
span.innerHTML = word;
$('box').appendChild(span);
$('txt').value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}
</style>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 = $('txt').value;
var span = document.createElement('span');
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 = 'absolute';
span.style.top = top + "px";
span.style.color = color;
span.style.left = '500px';
span.style.whiteSpace = 'nowrap';
var nub = (Math.random() * 10) + 1;
span.setAttribute('speed', nub);
span.speed = nub;
span.innerHTML = word;
$('box').appendChild(span);
$('txt').value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}
</script>
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!