В данной статье вы узнаете как при помощи скрипта можно добиться эффекта пишущей машинки.
Реалистичная пишущая машинка / ввод текста на jQuery
Для начала создадим страницу с обычным шаблоном на HTML и подключим сразу же нашу любимую JS библиотеку:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> </body> </html>
Теперь, внутри тега body создаем блок с идентификатором box:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div id="box"></div> </body> </html>
После того как вы все сделали, напишем простенький javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
var $text = "";
var $count = 0;
var $maxspeed = 200;
function type(){
var $random = Math.floor(Math.random()* $maxspeed);
setTimeout(type, $random);
$('#box').append('a');
}
type();
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Если запустить в браузере, то в результате будет печататься буква “а” с рандомной скоростью. Усовершенствуем наш скрипт еще больше:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
var $text = "";
var $count = 0;
var $maxspeed = 200;
function character(start, end, text) {
return text.substring(start,end);
}
function type() {
var $random = Math.floor(Math.random()* $maxspeed);
setTimeout(type, $random);
$('#box').append();
$count++;
}
type();
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Все незнакомые для вас методы и функции рекомендую прогуглить :). Продолжаем разибирать по шагам, сейчас код ничего не выдает, потому что мы убрали из append букву. Немного терпения, и получаем в итоге:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
var $text = "forwww.com - Блог для веб-разработчиков";
var $count = 0;
var $maxspeed = 200;
function character(start, end, text) {
return text.substring(start,end);
}
function type() {
var $random = Math.floor(Math.random()* $maxspeed);
setTimeout(type, $random);
$('#box').append(character($count, $count+1, $text));
$count++;
}
type();
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Вот и всё, мы с вами создали 2 простенькие функции, которые позволили нам решить данную задачу – сделать “как печатная машинка”.
Да, скрипт лучше поместить в конце страницы – это общая рекомендация.
