Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2023, 09:20
BSI BSI вне форума
Аспирант
Отправить личное сообщение для BSI Посмотреть профиль Найти все сообщения от BSI
 
Регистрация: 01.06.2013
Сообщений: 48

Скрыть объект до начала работы скрипта и показать в момент работы скрипта.
Всем привет. Есть у меня скрипт, который печатает текст как печатная машинка. Задержка выполнения скрипта после открытия страницы 2 сек. проблема в том, что текст, который печатается на странице, появляется полностью на экране, далее через 2сек. текст пропадает и начинается работа скрипта (печатается текст). Предполагаю, что в стилях надо скрыть объект текста, а скрипте прописать его появление. Вот это появление я не знаю как сделать.
Вот скрипт
[JS]function pechat() {

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, 60)
};
str_write()


}

setTimeout(pechat, 2000);
[/JS]

Файл приложил. Всем спасибо.
Вложения:
Тип файла: zip Новая папка.zip (465.7 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2023, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Сообщение от BSI
Предполагаю, что в стилях надо скрыть объект текста, а скрипте прописать его появление. Вот это появление я не знаю как сделать.
строки 39, 41, 83
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Привет</title>
<style type="text/css">
html, body {
    background: url(1.jpg) no-repeat center center fixed;
}
#test {
    width: 30vw;
    height: 23vw;
    position: relative;;
    left: -18em;
    bottom: -3em;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 20px;
    font-family: garamond serif;
    font-weight: bold;
    font-style: italic;
    color: red;
    font: 600 30px/1.3 'Syncopate', sans-serif;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px   rgba(0,0,0, .10),
    0 0 5px   rgba(0,0,0, .10),
    0 1px 3px   rgba(0,0,0, .30),
    0 3px 5px   rgba(0,0,0, .20),
    0 5px 10px  rgba(0,0,0, .25),
    0 10px 10px rgba(0,0,0, .20),
    0 20px 20px rgba(0,0,0, .15);
    text-transform: uppercase;
    font-size: 1.2vw;
    opacity: 0;
}
#test.show {
    opacity: 1;
}
</style>
  </head>
  <body>
<div id="test" >
Белеет парус одинокий<br>
В тумане моря голубом!..<br>
Что ищет он в стране далекой?<br>
Что кинул он в краю родном?...<br><br>
Играют волны — ветер свищет,<br>
И мачта гнется и скрипит...<br>
Увы! Он счастия не ищет<br>
И не от счастия бежит!
</center></div>
<script>
function pechat() {
  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(str_write, 60)
  };
  d.classList.add('show');
  str_write()
}
setTimeout(pechat, 2000);
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2023, 10:38
BSI BSI вне форума
Аспирант
Отправить личное сообщение для BSI Посмотреть профиль Найти все сообщения от BSI
 
Регистрация: 01.06.2013
Сообщений: 48

Вот спасибо добрый человек за быстрый ответ.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск