Эффект вычисления строки в JavaScript
Я как-то писал о jQuery плагине, который создает запоминающиеся пароли. Основа его привлекательности кроется в интересном эффекте: новый пароль как бы вычисляется на глазах у зрителя.
Сегодня расскажу, как сделать такой эффект.
Создадим функцию generate, которая будет создавать наш эффект вычисления строки:
var generate = function(str, result, from, delay) {
// Здесь будет наш код
}
Наша функция принимает четыре пораметра, первые два — обязательные.
str — это та строка, которая будет показана в конце нашей анимации (результат вычислений)
result — это html элемент, для удобства уже «завернутый» в jQuery объект.
from — это строка, состоящая из символов, участвующих в нашей анимации. Если не определена, то 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz !'
delay — это задержка между изменениями. Если не определена, то 100.
Наша функция не будет возвращать никаких значений, а только вносить изменения в текст на экране.
Прежде всего, нам нужна служебная функция, которая «перемешивает» элементы массива:
var shuffle = function(a) {
var i, j, x;
j = void 0;
x = void 0;
i = void 0;
i = a.length;
while (i) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
i -= 1;
}
};
Далее нам понадобятся две функции для рекурсии.
var outerSort = function() {
var letter, letters, span;
if (strArray.length === 0) {
return;
}
span = $('').appendTo(result);
letter = strArray.shift();
letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz !'.split('');
if(from) letters = from.split('');
shuffle(letters);
innerSort(letters, letter, span);
outerSort();
};
var innerSort = function(letters, letter, span) {
var x;
if (!letters || letters.length === 0) {
return;
}
x = letters.shift();
span.html(x);
setTimeout((function() {
if (x === letter) {
span.addClass('sp-generated');
} else {
innerSort(letters, letter, span);
}
}), delay);
};
Функция outerSort
использует внешнюю по отношению к ней переменную strArray
в которую попадает строка str
, но уже в виде массива символов:
strArray = str.split('');
outerSort();
Функция забирает первый элемент из массива (при помощи shift
), создает для него span=$('<span>').appendTo(result)
, делает из from
массив и перемешивает его с помощью нашей функции shuffle
. Затем она передает все это в функцию innerSort
и вызывается снова.
Функция innerSort
перебирает массив символов с заданным интервалом delay
до тех пор, пока не будет совпадения.
Теперь нам осталось вызвать нашу функцию:
var thanks = $('#thanks');
thanks.click(function(){
$(this).empty();
generate('Thank you a lot!', $(this));
});
var pi = $('#pi');
pi.click(function(){
$(this).empty();
generate('3.1415926535', $(this), '0123456789.', 100);
});
Это работает вот так:
Данный пример можно посмотреть на Codepen
Полный код:
var generate = function(str, result, from, delay) {
if(!delay) delay = 50;
var strArray;
var shuffle = function(a) {
var i, j, x;
j = void 0;
x = void 0;
i = void 0;
i = a.length;
while (i) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
i -= 1;
}
};
var outerSort = function() {
var letter, letters, span;
if (strArray.length === 0) {
return;
}
span = $('').appendTo(result);
letter = strArray.shift();
letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz !'.split('');
if(from) letters = from.split('');
shuffle(letters);
innerSort(letters, letter, span);
outerSort();
};
var innerSort = function(letters, letter, span) {
var x;
if (!letters || letters.length === 0) {
return;
}
x = letters.shift();
span.html(x);
setTimeout((function() {
if (x === letter) {
span.addClass('sp-generated');
} else {
innerSort(letters, letter, span);
}
}), delay);
};
strArray = str.split('');
outerSort();
};
var thanks = $('#thanks');
thanks.click(function(){
$(this).empty();
generate('Thank you a lot!', $(this));
});
var pi = $('#pi');
pi.click(function(){
$(this).empty();
generate('3.1415926535', $(this), '0123456789.', 100);
});