Comment randomiser la position du tableau en JavaScript

Posté Par: Windows2022tutosur: décembre 26, 2022Dans: TechPas De Commentaires

Comment randomiser la position du tableau en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment randomiser la position du tableau en JavaScript. Ce tutoriel a pour but de vous apprendre à randomiser la position du tableau. Cela couvrira toutes les parties de base de la fonction qui rendront aléatoire la position de l’index du tableau. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Le but de ce programme est de vous montrer comment randomiser la position d’index du tableau. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Randomiser la position du tableau. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code ne sera que la valeur du tableau et le bouton. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Randomize Array Position in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<button class="btn btn-primary" type="button" onclick="shuffle();">Shuffle</button>
		<div id="result" style="width:550px; height:300px; border:10px solid #ccc; padding:20px;"></div>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code randomisera la position du tableau lorsque le bouton sera cliqué. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

display();
 
function arrayRear(arr) {
    for (var i = , rear = [], randomIndex = ; i < arr.length; i++) {
        randomIndex = Math.floor(Math.random() *  arr.length);
        while (rear.indexOf(arr[randomIndex]) !== -1) {

  


            randomIndex = Math.floor(Math.random() *  arr.length);
        }
       rear.push(arr[randomIndex]);
    }
 
	return rear;
}
 
function display(){
	let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
	let html = "";
	for(let i=; i<arr.length; i++){
		html += "<div width:200; height:200; style="margin:10px; font-size:50px; float:left;">"+arr[i]+"</div>";
	}
	html += "<br style="clear:both;"/>";
 
	document.getElementById('result').innerHTML = html;
}
 
function shuffle(){
	let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
	let html = "";
	arrayRear(arr).forEach(function(item){
		html += "<div width:200; height:200; style="margin:10px; font-size:50px; float:left;" >"+item+"</div>";
	})
	html += "<br style="clear:both;"/>";
 
	document.getElementById('result').innerHTML = html;
}

Dans le code ci-dessus, nous créons une méthode spéciale appelée tableauArrière(), cette fonction randomisera la position d’index de tableau du tableau ciblé. Nous ne créerons qu’une méthode qui n’affichera que la valeur du tableau et un événement qui sera déclenché par un bouton lié. Pour randomiser la position d’index d’un tableau, nous ajouterons simplement la valeur du tableau dans la méthode que nous avons créée tableauArrière().

Production:

Le Comment randomiser la position du tableau en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment randomiser la position du tableau en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici