Форум

chelkaz · #1 (**permalink**) 17.12.2014, 15:35

Ребята, помогите сделать переносы в тексте который печатается по нажатию клавиш. Я написал скрипт как смог, так как дизайнер хороший, но тут слаб( Нужно чтобы набирающийся текст переносился. Либо где запятые, либо как то вставлять <br> в сам текст. Но при наборе все теги превращаются в сущности...

Вот как сейчас выглядит:http://avoidcrash.ru/send.php Начните нажимать на клавиатуру и поймете. Нужно как то добавлять переносы...
Вот скрипт:

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function mig() {
	blink("#myDiv", 9999999999, 300);
};
function stop() {
	blink("#myDiv", 0, 99999999990);
};
function blink(elem, times, speed)
{
	if (times > 0 || times < 0) {
		if ($(elem).hasClass("blink"))
			$(elem).removeClass("blink");
		else
			$(elem).addClass("blink");
	}
	
	clearTimeout(function() { blink(elem, times, speed); });
	
	if (times > 0 || times < 0) {
		setTimeout(function() { blink(elem, times, speed); }, speed);
		times-= .5;
	}
}
</script>
<style type="text/css">
.blink {
	color: #FFF !important;
	background: #20d23e; !important;
}
a:link {        color: #203B89; text-decoration: underline; }
a:visited {        color: #173077; text-decoration: underline; }
a:active {        color: #aa0000; text-decoration: underline; }
a:hover { color: #ff0000; text-decoration: underline;  }
body {text-align: left; background: #000; color: #FFF; font-size: 24px;
}
</style>

<script>
var chr = 0;
var txt = '     Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях.'
var l = txt.length
var p = '<span id="myDiv">&nbsp;&nbsp;</span>'
i=-3
function changetext() {
for (var s = 0; s < Math.floor((Math.random() * 3) + 1); s++) {
   chr++;
   t = document.all["text"].innerHTML
   tt = t.substring(0,i++)
   var w = tt[tt.length-1]
   //alert(w);
  // if (w == " ") {
   
   //}
   document.all["text"].innerHTML = tt + txt.charAt(chr) + p
   }
}
</script>
</head>
<body>
<div class="next" id="text"></div>

<script>
mig();
document.onkeydown = function (e) {
	e = e || window.event;
	if (e.keyCode) {
	stop();
		setTimeout("changetext()", 150);
	}
	else {
		
	}
	// Отменяем действие браузера
	
	return false;
}
</script>
</body>
</html>

jsnb · #2 (**permalink**) 17.12.2014, 19:44

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
  setInterval(function() {
    $('#blinker').toggleClass('blink');
  }, 500)

  var blinker = '<span id="blinker">&nbsp;&nbsp;</span>'
  $(blinker).appendTo( $('#text') );

  var txt = [
              ' Люблю грозу в начале мая,',
              ' Когда весенний, первый гром,',
              ' как бы резвяся и играя,',
              ' Грохочет в небе голубом.',
              '',
              ' Гремят раскаты молодые,',
              ' Вот дождик брызнул, пыль летит,',
              ' Повисли перлы дождевые,',
              ' И солнце нити золотит.',
              '',
              ' С горы бежит поток проворный,',
              ' В лесу не молкнет птичий гам,',
              ' И гам лесной и шум нагорный -',
              ' Все вторит весело громам.',
              '',
              ' Ты скажешь: ветреная Геба,',
              ' Кормя Зевесова орла,',
              ' Громокипящий кубок с неба,',
              ' Смеясь, на землю пролила.'
            ].join('\n');
  var index = 0;

  $(document).keydown(function() {
    var rnd = Math.floor( Math.random()*2 + 1);
    var newChars = txt.slice(index, index + rnd).replace(/\n/g, '<br>');
    $('#text').html( txt.slice(0, index).replace(/\n/g, '<br>') + newChars + blinker);
    index += rnd;

    return false;
  });
});

</script>
<style type="text/css">
.blink {
    color: #FFF !important;
    background: #20d23e; !important;
}
a:link {        color: #203B89; text-decoration: underline; }
    a:visited {        color: #173077; text-decoration: underline; }
        a:active {        color: #aa0000; text-decoration: underline; }
            a:hover { color: #ff0000; text-decoration: underline;  }
                body {text-align: left; background: #000; color: #FFF; font-size: 24px;
}
</style>


</head>
<body>
<div class="next" id="text"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript