En este tutorial vamos aprender a generar múltiples contraseñas para varios usuarios usando JavaScript. El código usa onclick () para llamar a una función específica que puede generar una contraseña aleatoria múltiple usando el bucle for () para volver a ejecutar una función una por una que depende de la condición. Puede aplicar este script a su código para acelerar su transacción, es un programa fácil de usar, no dude en modificarlo.
Usaremos javascripts para agregar alguna característica nueva a la interfaz del sitio web al escribirla realmente en una página HTML. Es lo que le da a su página diferentes elementos interactivos y animaciones que atraen al usuario.
Empezando:
Este es el enlace para la rutina de carga que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body onload="defaultTableContent();">
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Generar Múltiples Contraseñas para Usuarios en Javascript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-2"></div>
<div class="col-md-8">
<button type="button" class="btn btn-primary" onclick="generatePasswords();">Generar Contraseña</button>
<br /><br />
<table class="table table-bordered">
<thead class="alert-info">
<tr>
<th>Nombre</th>
<th>Usuario</th>
<th>Contraseña</th>
</tr>
</thead>
<tbody id="result"></tbody>
</table>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Crear el script:
Este código contiene el script de la aplicación. Este código generará una contraseña de contraseña aleatoria múltiple automáticamente. Para hacer esto, simplemente copie y escriba este bloque de códigos como se muestra a continuación dentro del editor de texto y guárdelo como script.js dentro del directorio js
var names=["John Salas", "Clara Rios", "Alex Pepori", "Scott Zapata", "Richard Gomez"];
var username=["john", "clarita", "pewdipie", "vitolo", "maxmax"];
var password=[];
function defaultTableContent(){
var html="";
for(var i=0; i<5; i++){
html+="<tr><td>"+names[i]+"</td><td>"+username[i]+"</td><td></td></tr>";
}
document.getElementById('result').innerHTML=html;
}
function generatePasswords(){
var html="";
for(var i=0; i<5; i++){
password.push(randomPassword());
}
for(var i=0; i<5; i++){
html+="<tr><td>"+names[i]+"</td><td>"+username[i]+"</td><td>"+password[i]+"</td></tr>";
}
document.getElementById('result').innerHTML=html;
password=[];
}
function randomPassword(){
var characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var newPassword = "";
for(var i = 0, j = characters.length; i < 12; i++){
newPassword += characters.charAt(Math.floor(Math.random() * j));
}
return newPassword;
}
Ahí lo tienes, creamos con éxito una Generar contraseña múltiple para el usuario usando JavaScript.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
