Друкований текст на екрані (Javascript)

Раніше цей скрипт стояв на цьому сайті, але одного разу я вирішив його забрати. Не тому, що він погано працював, а тому, що з певних міркувань я вважав його зайвим. Але щоб скрипт зберігся, я вирішив створити цю посаду. Велика ймовірність, що він мені ще знадобиться.

Скрипт нижче імітує друкування заголовків статей на екрані як посилання на саму статтю. Заголовки вказуються в скрипті і вказуються УРЛи до них. Скрипт створює посилання з переданих даних та друкує посилання в одному рядку по черзі.

Демо

А це код скрипту:

Рекомендую: <a id="Ticker" href="http://example.com/default_link">Тут можна вписати дефолтне посилання.</a>
<script type="text/javascript">
	var CharTimeout = 50; // Швидкість друкування
	var StoryTimeout = 2000; // час очікування перед перемиканням

	var Summaries = новий Array();
	var SiteLinks = новий Array();

		Summaries[0] = 'Плагін Webmaster Yandex для WordPress';
		SiteLinks[0] = 'http://wp-kama.ru/?p=4015';
		Summaries[1] = 'Kama Thumbnail: плагін WordPress для створення картинок-мініатюр запису';
		SiteLinks[1] = 'http://wp-kama.ru/id_142/kama-thumbnail.html';
		Summaries[2] = 'Налаштовуємо robots.txt для WordPress';
		SiteLinks[2] = 'http://wp-kama.ru/id_803/pishem-pravilnyiy-robotstxt-dlya-wordpress.html';
		Summaries[3] = 'WP-Cumulus: 3D хмара міток на flash (покращена російська версія)';
		SiteLinks[3] = 'http://wp-kama.ru/?p=4271';
		Summaries[4] = 'Плагін для захисту від спаму в коментарях WordPress';
		SiteLinks[4] = 'http://wp-kama.ru/id_95/plagin-dlya-blokirovki-spama-v-kommentariyah-dlya-wordpress.html';
		Summaries[5] = 'Плагін для легкого керування сайтом на WordPress (версія 3)';
		SiteLinks[5] = 'http://wp-kama.ru/note/plagin-dlya-legkogo-upravleniya-saytom-na-wordpress-versiya-3';
		Summaries[6] = 'Автоматичне розтягування тексту на javascript і jQuery';
		SiteLinks[6] = 'http://wp-kama.ru/id_112/avtomaticheskoe-rastyagivanie-polya-textarea-kommentariya-versiya-2.html';

	/* Друкування тексту - Тіккер
	-------------------------------------------------- --------------
	var CharTimeout = 20;
	var StoryTimeout = 7000;
	var Summaries = новий Array();
	var SiteLinks = новий Array();
		Summaries[0] = "CMS для простих сайтів GetSimple російською мовою";
		SiteLinks[0] = "#link1";
		Summaries[1] = "Spectrum - розкішна тема для WordPress російською мовою";
		SiteLinks[1] = "#link2";
	startTicker();
	*/

	function startTicker(){
		massiveItemCount = Number(Summaries.length); //кількість елементів масиву
		// Визначаємо значення запуску
		CurrentStory = -1;
		CurrentLength = 0;
		// Розташування об'єкта
		AnchorObject = document.getElementById("Ticker");
		runTheTicker();     
	}
	// Основний цикл тікера
	function runTheTicker(){
		var myTimeout;  
		// Перехід до наступного елементу
		if(CurrentLength == 0){
			CurrentStory++;
			CurrentStory = CurrentStory% massiveItemCount;
			StorySummary = Summaries[CurrentStory].replace(/"/g,'-');      
			AnchorObject.href = SiteLinks[CurrentStory];
		}
		// Маємо поточний текст в анкор з друкуванням
		AnchorObject.innerHTML = StorySummary.substring(0,CurrentLength) + znak();
		// Перетворимо довжину для підрядки та визначаємо таймер
		if(CurrentLength != StorySummary.length){
			CurrentLength++;
			myTimeout = CharTimeout;
		} else {
			CurrentLength = 0;
			myTimeout = StoryTimeout;
		}
		// Повторюємо цикл із урахуванням затримки
		setTimeout("runTheTicker()", myTimeout);
	}
	// Генератор підстановки знака
	function znak(){
		if(CurrentLength == StorySummary.length) return "";
		else return "|";
	}

	startTicker();
</script>

Пояснення до коду

Параметри CharTimeout = 50;і StoryTimeout = 2000;– це налаштування:

• CharTimeout– швидкість друкування
• StoryTimeout– час очікування перед перемиканням з одного посилання на інше.

Блок

Summaries[0] = 'Плагін Webmaster Yandex для WordPress';
SiteLinks[0] = 'http://wp-kama.ru/?p=4015';
...
Summaries[6] = 'Автоматичне розтягування тексту на javascript і jQuery';
SiteLinks[6] = 'http://wp-kama.ru/id_112/avtomaticheskoe-rastyagivanie-polya-textarea-kommentariya-versiya-2.html';

можна отримувати динамічні в WordPress. Допустимо, можна отримувати записи з довільним полем “Рекомендую” та вивести їх у потрібному форматі. Для WordPress код буде таким:

<?php
$query = new WP_Query( 'meta_key=Рекомендую' );
$ arnum = 0;
while ( $query->have_posts() ) {
	$query->the_post();
	echo "
		Summaries[$arnum] = '". addslashes( get_the_title() ) ."';
		SiteLinks[$arnum] = '". get_permalink() ."';
	";
	$arnum++;
}
wp_reset_query();
?>

Просто текст, що друкується

Якщо мова зайшла про друкування тексту на екрані, то напевно правильно було б навести приклад простого друкування звичайного або незвичайного тексту, тут від автора залежить. Як і раніше: спочатку приклад, а потім код:

приклад

<div id="my-text">
Цей текст друкується сам. І не важливо, що ви не дивитеся на нього чи навіть не
дивіться взагалі будь-куди. Він продовжуватиме друкуватися зі стабільною швидкістю:
одна літера/50 мілісекунд. <br><br>

Як бачите, можна надрукувати навіть перенесення рядків. <br><br>

В іншому це не друкування, а виведення вже готового тексту в стилі друкарської машинки
це цікаво і іноді приваблює читачів, тому візьміть на озброєння цей
скрип. До того ж, він дуже простий.
</div>

<script>
function printText( el ){

	let letterTimeout = 20

	let text = el.innerHTML
	let i = 1

	let print__fn = function(){

			if( i <= text.length ){
				el.innerHTML = text.substr(0, i);
				setTimeout( arguments.callee, letterTimeout );
			}

			i++;
		}

	print__fn() // init
};

// init
let el = document.getElementById( 'my-text' )
printText(el);

</script>