Перевод строки

@bsi1 · Регистрация: 05.05.2014

Студворк — интернет-сервис помощи студентам

Привет всем. Проблема в том, что текст печатается в левом углу, а надо чтобы печатался в центре. Но главное как тут сделать перевод строки, чтобы было не "Привет, Вася. Как дела?", а "Привет, Вася." на одной строке и "Как дела?" на другойю Файл во вложении. Всем спасибо.

@ShaRpN00B · 17.02.2020, 14:58

Вообщем смотри, для переноса строк используешь также как и просто в html тег <br>:

HTML5
1
2
3
4
5
6
7
8
9
<div class="type-js headline">
    <div class="text-js">
        <h1>
            Привет, Вася!
            <br>
            Как дела?
        </h1>
    </div>
</div>

А в скрипте был косяк в том что считывался именно текст который содержится, а нужно html код вот такой результирующий js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function autoType(elementClass, typingSpeed){
  var thhis = $(elementClass);
  thhis.css({
    "position": "relative",
    "display": "inline-block"
  });
  thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
  thhis = thhis.find(".text-js");
  var text = thhis.html().split('');//Здесь было thhis.text().split('') и тег <br> пропускался
  var amntOfChars = text.length;
  var newString = "";
  thhis.html("|");  //Здесь тоже было text()
  setTimeout(function(){
    thhis.css("opacity",1);
    thhis.prev().removeAttr("style");
    thhis.html("");  // И здесь
    for(var i = 0; i < amntOfChars; i++){
      (function(i,char){
        setTimeout(function() {
          newString += char;
          thhis.html(newString); //И особенно вот здесь, потому что если здесь будет text() то теги просто выведутся на экран и не сработают
        },i*typingSpeed);
      })(i+1,text[i]);
    }
  },1500);
}
 
$(document).ready(function(){
  // Now to start autoTyping just call the autoType function with the 
  // class of outer div
  // The second paramter is the speed between each letter is typed.   
  autoType(".type-js",200);
});

@bsi1 · 17.02.2020, 17:16 **[ТС]**

ShaRpN00B, спасибо огромное. Есть правда вопрос. Длительная задержка перед началом печатания и второе перед началом печатания Привет, Вася появляется знак < и потом пропадает, после окончания печатания Привет, Вася появляется знак < < и потом пропадает, после окончания печатания Как дела появляются знаки < / и пропадают. В чём причина? Файл с вашим кодом в приложении. Ещё раз спасибо.

@ShaRpN00B · 17.02.2020, 18:13

bsi1, Так:
1. Задержка перед первым символом нужно уменьшить значение в коде найдите 1500 это равно 1,5сек в миллисекундах, поиграйте с этим значением в сторону уменьшения до необходимого вам.

2. Это выводятся теги Html, тут нужно более голубоко подумать как прятать их, сейчас с ходу не скажу как такое сделать, пока не за компьютером)

@bsi1 · 17.02.2020, 18:54 **[ТС]**

Привет.
Спасибо за быстрый ответ.
Вместо 1500 ставил 1, что-то разницу я не заметил. Будь добр, помоги удалением этих значков.
И еще вопрос в файле html ссылка на файл JS

HTML5
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script  src="./script.js"></script>

, но надо же просто

HTML5
1
<script  src="./script.js"></script>

, если

HTML5
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

убираю, то ничего не работает.
Если всё оставляю так

HTML5
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script  src="./script.js"></script>

, то при отключенном интернете при открытие файла html в internet explorer или edge Microsoft ничего не работает, если открываю, при отключенном интернете, в chrome, то всё работает.

Что за фигня? Я в этих делах пока плохо разбираюсь, помоги если не сложно. Ещё раз спасибо.

@bsi1 · 19.02.2020, 16:46 **[ТС]**

Нашел вот такое решение.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<head>
  <title></title>
  <meta charset="UTF-8">
<style>
div#test {
color: Purple;
font-size: 30px;
margin-top: 100px;
margin-left:200px;
}
</style>
</head>
<body>
<div id="test">Белеет парус одинокий<br>
В тумане моря голубом!..<br>
Что ищет он в стране далекой?<br>
Что кинул он в краю родном?...<br><br>
Играют волны — ветер свищет,<br>
И мачта гнется и скрыпит...<br>
Увы! Он счастия не ищет<br>
И не от счастия бежит!<br><br>
Под ним струя светлей лазури,<br>
Над ним луч солнца золотой...<br>
А он, мятежный, просит бури,<br>
Как будто в бурях есть покой!<br>
</div>
 
<script language="JavaScript" type="text/javascript">
var textNodes = [];
var textNodes_data = [];
var i=0;
function search_textNodes(b) {
    b = b.childNodes;
    for (var c = 0, d = b.length; c < d; c++) {
        var a = b[c];
        if (a.nodeType == 3) {
            textNodes.push(a);
            textNodes_data.push(a.data);
            a.data = ""
        } else a.hasChildNodes() && search_textNodes(a)
    }
};
var d = document.getElementById('test');
search_textNodes(d);
function str_write() {
    var a = textNodes_data[i];
    if (a) {
        textNodes[i].data += a.charAt(0);
        textNodes_data[i] = a.substr(1)
    } else i++;
    i < textNodes.length && setTimeout(arguments.callee, 100)
};
str_write()
</script>
</body>
</html>

Всем спасибо.

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@ShaRpN00B 490 / 167 / 98 Регистрация: 23.01.2020 Сообщений: 324
	17.02.2020, 18:13
	bsi1, Так: 1. Задержка перед первым символом нужно уменьшить значение в коде найдите 1500 это равно 1,5сек в миллисекундах, поиграйте с этим значением в сторону уменьшения до необходимого вам. 2. Это выводятся теги Html, тут нужно более голубоко подумать как прятать их, сейчас с ходу не скажу как такое сделать, пока не за компьютером) 1