Форум

seniormelikyan · #1 (**permalink**) 19.03.2014, 22:27

Всем доброй ночи. Хотелось бы реализовать эффект печатной машинки на сайте, чтобы буквы печатались через определенный интервал. Есть такой код, который работает корректно, но желаемого результата не дает. Подскажите, в чем ошибка. Код написан на jQuery:

$.fn.typewriter = function(params) {
        var params = params || {},
            repeat = 'undefined' !== typeof params.repeat && ('boolean' === typeof params.repeat || 'number' === typeof params.repeat && (params.repeat === 0 || params.repeat === 1)) ? !!params.repeat : true,
            speed = 'undefined' !== typeof params.speed && 'number' === typeof params.speed && params.speed > 0 ? params.speed : 150;
        
        return this.each(function() {
            var $this = $(this),
                text = $.trim($this.text());
            
            setTimeout(function() {
                var line = ' ' + text,
                    i = 0;
                
                if (i++ < line.length) {
                    $this.text($this.text().substring(1, i));
                } else {
                    if (repeat === false) {
                        exit();
                    } else {
                        $this.text(' ');
                        i = 0;
                    }
                }
            }, speed);
        });
    };

Sweet · #2 (**permalink**) 19.03.2014, 22:38

setTimeout вызывает коллбэк один раз, используй setInterval. И exit() - это твои фантазии. Используй clearInterval.

seniormelikyan · #3 (**permalink**) 19.03.2014, 22:49

Сообщение от Sweet

setTimeout вызывает коллбэк один раз, используй setInterval. И exit() - это твои фантазии. Используй clearInterval.

Не помогло

P.S.: Cорри, exit() с PHP перепутал

seniormelikyan · #4 (**permalink**) 19.03.2014, 23:01

Проблема решена

Тему можно закрывать.

рони · #5 (**permalink**) 19.03.2014, 23:52

seniormelikyan,
Вариант

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
 div{
   font-size: 24px;
   height: 30px;
 }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.fn.typewriter = function (params) {
    function writer(elem, text, speed, repeat) {
    var i = 0,
        TextNode = document.createTextNode("");
        elem.appendChild(TextNode);
        elem.timer = setInterval(function () {
            if (text.length === i) repeat ? (i = 0, TextNode.data = "") : clearInterval(elem.timer);
            else
                for (TextNode.data += text[i++];" " === text[i];) TextNode.data += text[i++]
        }, speed)
    }
    var options = {
        speed: 500,
        repeat: false
    }, options = $.extend(options, params);
    return this.each(function () {
        var text = $(this).text();
        $(this).text("");
        writer(this, text, options.speed, options.repeat)
    })
};
</script>
<script type="text/javascript">
$(window).load(function(){
$(".one").typewriter({repeat: true});
$(".too").typewriter();
});
</script>
  <title></title>
</head>
<body>
<div class="one">Всем доброй ночи.</div>
<div class="too">Код написан на jQuery.</div>
</body>
</html>

Vlasenko Fedor · #6 (**permalink**) 20.03.2014, 00:19

<div id="data"></div>
<script>
(function () {
var str = 'Привет форум JavaScript',
	len = str.length,
	i = 0,
	tId = setInterval(function () {
	  data.innerHTML += str[i++];
	  if (i == len) clearInterval(tId);
	}, 400);
}());
</script>

<div id="data"></div>
<script>
(function () {
var str = 'Привет форум JavaScript',
	len = str.length + 1,
	i = 0;
	setInterval(function () {
	  data.innerHTML += str[i++];
	  if (i == len) data.innerHTML = '', i = 0;
	}, 400);
}());
</script>

мой вариант

Feex · #7 (**permalink**) 18.04.2017, 17:24

Подскажите, пожалуйста, как сделать перенос строки?

<p id="data"></p>
<script>
(function () {
var str = 'Первая строка <br> Вторая строка!',
	len = str.length,
	i = 0,
	tId = setInterval(function () {
	  data.innerHTML += str[i++];
	  if (i == len) clearInterval(tId);
	}, 50);
}());
</script>

рони · #8 (**permalink**) 18.04.2017, 17:47

Feex,

<p id="data"></p>
<script>
(function () {
var str = 'Первая строка <br> Вторая строка!',
  len = str.length,
  i = 0,
  a,
  tId = setInterval(function () {
    a = str[i];
    if(a == '<') {a = '<br>'; i += 4 }
    else i++
    data.innerHTML += a;
    if (i == len) clearInterval(tId);
  }, 50);
}());
</script>

Feex · #9 (**permalink**) 18.04.2017, 18:02

Сообщение от рони

Feex,

<p id="data"></p>
<script>
(function () {
var str = 'Первая строка <br> Вторая строка!',
  len = str.length,
  i = 0,
  a,
  tId = setInterval(function () {
    a = str[i];
    if(a == '<') {a = '<br>'; i += 4 }
    else i++
    data.innerHTML += a;
    if (i == len) clearInterval(tId);
  }, 50);
}());
</script>

Рони, Как всегда, спасибо!!!
В этой теме есть решение, Ваше, кстати, просто отличный вариант, но хотелось что-то по-легче)
В общем, Спасибо еще раз)

Форум

Справочник

Discord чат

Курсы javascript