ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Онлайн генератор паролей на 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);
}

Код

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 Просмотров: 1341 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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