ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Онлайн генератор паролей на CSS + JS

Онлайн генератор паролей на CSS + JS

Онлайн генератор паролей на CSS + JS
Это генератор случайных паролей в формате онлайн, который предназначен для сайта, для того, чтоб создать генерацию качественного пароля по клику. Сам генератор паролей изначально был создан для пользователя, это для помощи с автоматическим придумыванием устойчивых к взлому и легко запоминающихся паролей. Здесь при клике он выдает пароль, где все происходит рандомно, так как созданный ранее пароль уже не будет повториться.

Иногда нужно создать такой пароль, что даже в голосу не приходит, и в таком расположение, чтоб можно было запомнить. И здесь генератор отлично справляется, ведь его можно разместить на отдельной страницы на интернет ресурсе, где каждый может воспользоваться.

Ведь использование одного и того же пароля для каждого сайта опасно. Если ваш пароль используется для взлома или взлома данных, вся ваша жизнь в интернете может оказаться под угрозой. Для этого нужно создать случайный пароль, а если у вас несколько аккаунтов, то здесь для каждой учетной записи, которой вы владеете. Где после всего, они защищены главным паролем.

Проверено на работоспособность, где выглядит так после установки:

Генератор случайных чисел пароля для сайтов

Установочный процесс:

HTML

Код
<div class="generator-paroley">Генератор случайных паролей<span>Создание надежного пароля</span></div>  

<form name="randform">  
  <input class="randomna-chisla" type="button" onClick="randomString();" autofocus value="ГЕНЕРИРОВАТЬ">  
  <input class="sluchaynu-parolis" type="text" name="randomfield" value="" onclick="this.select();">  
</form>

CSS

Код
body {  
  background: #15569a;  
  font-family: 'Varela Round';  
  font-size: 100%;  
}  

::selection { background: #66A5FF; color: #fff;  
}  

.generator-paroley {  
  position: fixed;  
  top: 15px;  
  left: 15px;  
  width: 475px;  
  height: 58px;  
  border-radius: 3px;  
  text-indent: 85px;  
  color: #f5f5f5;  
  line-height: 35px;  
  transition: all .2s ease;  
  text-shadow: 0 1px 0 #423e3e;  
  font-size: 19px;  
  font-weight: bold;  
}  

.generator-paroley:before {  
content: "\f085";  
  font-family: FontAwesome;  
  position: absolute;  
  top: 0px;  
  left: 0px;  
  width: 73px;  
  height: 73px;  
  line-height: 73px;  
  text-indent: 0px;  
  color: #66A5FF;  
  font-size: 250%;  
  text-align: center;  
  background: #fff;  
  border-radius: 3px;  
  transition: all .2s ease;  
  }  

  span {  
  position: absolute;  
  top: 25px;  
  left: 0;  
  }  

  a {  
  text-decoration: none;  
  color: #efeaea;  
  }  

   

.sluchaynu-parolis {  
  position: fixed;  
  top: calc( 50vh - 50px);  
  left: calc( 50vw - 200px);  
  width: 400px;  
  height: 100px;  
  background: none;  
  border: none;  
  outline: none;  
  line-height: 100px;  
  font-family: sans-serif;  
  font-size: 50px;  
  text-align: center;  
  color: rgb(162, 255, 165);  
  text-shadow: 0 1px 0 #3a3535;  
}  

.randomna-chisla {  
  position: fixed;  
  top: calc( 50vh + 70px);  
  left: calc( 50vw - 75px);  
  width: 175px;  
  height: 40px;  
  border: none;  
  background: rgba(53, 43, 60, 0.63);  
  border-radius: 100px;  
  outline: none;  
  line-height: 35px;  
  font-size: 17px;  
  font-weight: bolder;  
  text-align: center;  
  color: rgba(243, 243, 243, 0.84);  
  z-index: 10;  
  cursor: pointer;  
  transition: background .1s ease;  
  text-shadow: 0 1px 0 #4c4747;  
  border: 2px solid #867d7d;  
  padding-left: 10px;  
  padding-right: 10px;  
}  

.randomna-chisla:hover {  
  background: #0c5273;  
  box-shadow: 0px 0px 13px 1px rgba(191, 185, 185, 0.24), 0px 0px 8px 2px rgba(134, 130, 130, 0.52);  
}

JS

Код
function randomString() {  
  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";  
  var string_length = 10;  
  var randomstring = '';  
  for (var i=0; i<string_length; i++) {  
  var rnum = Math.floor(Math.random() * chars.length);  
  randomstring += chars.substring(rnum,rnum+1);  
  }  
  document.randform.randomfield.value = randomstring;  
}

onload = randomString();

Воспользоваться им просто, где нужно произвести клик, и после этого вам за несколько секунд сгенерировать число сложный и надежный пароль, который только вы знаете, но главное он легко запомнится.

Так как этот сложный пароль состоит из случайных чисел и символов, который как ранее сказано выпадают рандомно. Где при каждом создание будет оригинальная подборка цифр или знаков для безопасного пароля.

Демонстрация
12 Августа 2019 Загрузок: 2 Просмотров: 1236 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar