Для начала нам нужна разметка страницы, сделаем.

  <meta charset="UTF-8">
 
  <title>Демо - Генератор паролей<title>
 
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css">
 
 
 
 
 
  <div class="wrapper">
            <h1>Генератор пароля</h1>
            <div class="password"></div>
            <div class="generate">Генерировать</div>
            <div class="results">
            <ul class="resultlist"></ul>
  </div>
</div>
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="js/index.js"></script>

Всё как обычно, DOCTYPE html, head, подключения css, body, подключения js, вообщем не чего особенного.

Для вида нужна добавить не много css.

html,body,div,p,a,h1,span,header,footer,section,ul,li {margin:0px;padding:0px;font-weight:normal;}
 
body {
    background:#ecf0f1;
    color:#2c3e50;
    font-family:omnes-pro, sans-serif;
    border-top:4px solid #2c3e50;
}
 
.wrapper {
    width:450px;
    margin:0 auto;
    text-align:center;
}
 
h1 {
    margin-top:10px;
    margin-bottom:15px;
    text-align:center;
    font-size:50px;
}
 
input[type=text] {
    padding:8px;
    font-size:20px;
    width:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    margin-bottom:30px;
    border: solid 3px #2c3e50;
}
 
.password {
    font-size:20px;
}
 
.generate {
    padding:20px;
    background:#2c3e50;
    color:#fff;
    display:inline-block;
    margin-top:20px;
    cursor:pointer;
    border-radius:5px;
}
 
ul {
    list-style:none;
    margin-top:40px;
}
 
ul li {
    list-style-position: none;
    font-size:18px;
}
 
.source {
    float: left;
    text-align: right;
    width:50%;
    font-size:25px;
}

Все очень просто, первой сточки мы пропишем нулевые отступы элементов, к тегу body мы добавим цвета текста и фон.
.wrapper это блок шириной в 450px с центрированием, пропишем ещё не много строчек css для красоты.

Теперь сам javascript

var source = "";
var sourcesub;
var phonetic = [
    ['a','alpha'],
    ['b','bravo'],
    ['c','charlie'],
    ['d','delta'],
    ['e','echo'],
    ['f','foxtrot'],
    ['g','golf'],
    ['h','hotel'],
    ['i','india'],
    ['j','juliet'],
    ['k','kilo'],
    ['l','lima'],
    ['m','mike'],
    ['n','november'],
    ['o','oscar'],
    ['p','papa'],
    ['q','quebec'],
    ['r','romeo'],
    ['s','sierra'],
    ['t','tango'],
    ['u','uniform'],
    ['v','victor'],
    ['w','whiskey'],
    ['x','x-ray'],
    ['y','yankee'],
    ['z','zulu'],
    ['A','ALPHA'],
    ['B','BRAVO'],
    ['C','CHARLIE'],
    ['D','DELTA'],
    ['E','ECHO'],
    ['F','FOXTROT'],
    ['G','GOLF'],
    ['H','HOTEL'],
    ['I','INDIA'],
    ['J','JULIET'],
    ['K','KILO'],
    ['L','LIMA'],
    ['M','MIKE'],
    ['N','NOVEMBER'],
    ['O','OSCAR'],
    ['P','PAPA'],
    ['Q','QUEBEC'],
    ['R','ROMEO'],
    ['S','SIERRA'],
    ['T','TANGO'],
    ['U','UNIFORM'],
    ['V','VICTOR'],
    ['W','WHISKEY'],
    ['X','X-RAY'],
    ['Y','YANKEE'],
    ['Z','ZULU'],
    ['1','One'],
    ['2','Two'],
    ['3','Three'],
    ['4','Four'],
    ['5','Five'],
    ['6','Six'],
    ['7','Seven'],
    ['8','Eight'],
    ['9','Nine'],
    ['0','Zero'],
];
 
function generatePw() {
    'use strict';
    var i,
        n = 8,
        text = '',
        possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for(i=0; i < n; ++i){
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    $('.password').text(text);
    source = text;
    splitsource();
}
 
function splitsource() {
    var str = source;
    var i = str.length;
    var arr = str.split("");
  $('.resultlist').empty();
    $(arr).each(function() {
        sourcesub = $(this);
        decodesource(sourcesub);
    });
};
 
function decodesource(sourcesub) {
    $(phonetic).each(function() {
        if(sourcesub[0] == this[0]){
            $('.resultlist').append('<li>'+this[1]+'</li>');
        }
    });
}
 
$(document).ready(function(){
  'use strict';
  generatePw();
  $('.generate').on("click", function(){
    generatePw()
  });
});

При помощи функции generatePw() генерируется пароль, в var possible перечисляются буквы и цифры для генерация пароля. В цикле for происходит выбор букв или цифр из выше указанной переменой в переменную text. Функция splitsource(), из того что с генерировала прошлая функция, это превращает в массив и перебором выбирает пароли, а функция decodesource() передаёт это всё на страницу в class rusultlist

Добавлено: 08 Мая 2018 16:24:31 Добавил: Андрей Ковальчук Нравится 0

Добавить