Появление текста после нажатия

@crowleyrus · Регистрация: 19.08.2013

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

Доброго времени суток форумчане. Помогите пожалуйста. Мне нужно написать скрипт, но в Js я полный ноль. Нужно чтобы после нажатия на кнопку, в блоке div появлялся текст, но перед появлением текста чтобы появлялось изображение загрузки на 2 сек. в этом же блоке, а потом уже текст.
Вот как должно работать.
https://www.cyberforum.ru/atta... 1387721871

Вот html блока

HTML5
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
<html>
<head>
<title>Приветствие 2014</title>
<style type="text/css" rel="StyleSheet">
.gblock{width:350px; font-size:14px;border:solid 1px #000000;font-family: verdana, sans;}
.gtitle{background:#284352; color:#ffffff;}
.tb{width:348px;padding:2px;}
.texttyt{background:red;width:342px; font-size:14px; padding:2px; color:#ffffff;}
</style>
</head>
<body>
<div class="gblock">
<div class="gtitle">
Блок с приветсвием
</div>
<div >
<center><input type="button" value="Нажми" name="najatie"></center>
</div>
<div class="tb">
<div class="texttyt">
<!--тут должен появится текст и изображение загрузки-->
</div>
</div>
</div>
</body>
</html>

@Razip · 22.12.2013, 18:35

HTML5
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
<html>
    <head>
        <title>Приветствие 2014</title>
        <meta charset="UTF-8">
        <style type="text/css" rel="StyleSheet">
            .gblock{width:350px; font-size:14px;border:solid 1px #000000;font-family: verdana, sans;}
            .gtitle{background:#284352; color:#ffffff;}
            .tb{width:348px;padding:2px;}
            .texttyt{background:red;width:342px; font-size:14px; padding:2px; color:#ffffff;}
        </style>
    </head>
    <body>
        <div class="gblock">
            <div class="gtitle">
                Блок с приветсвием
            </div>
            <div >
                <center><input type="button" value="Нажми" name="najatie" id="button"></center>
            </div>
            <div class="tb">
                <div class="texttyt" id="load">
                    <!--тут должен появится текст и изображение загрузки-->
                </div>
            </div>
        </div>
        <script>
            document.getElementById('button').onclick = function() {
                var load_image = new Image();
                load_image.src = 'ссылка до картинки загрузки';
                load_image.onload = function() {
                  document.getElementById('load').appendChild(load_image);
                  setTimeout(function() {
                      document.getElementById('load').innerHTML = 'Текст';
                  }, 2000);
                };
            };
        </script>    
    </body>
</html>

Добавлено через 1 минуту
Замените текст в скрипте, и ссылку на свою картинку.

@crowleyrus · 22.12.2013, 18:46 **[ТС]**

Спасибо, работает, но весь текст отображается вот так: ��

@Razip · 22.12.2013, 18:59

crowleyrus, уберите <meta charset="UTF-8">. Забыл убрать.

@crowleyrus · 22.12.2013, 19:27 **[ТС]**

ок, спасибо тебе! )

@Razip · 22.12.2013, 19:35

crowleyrus, да не за что!

@crowleyrus · 22.12.2013, 19:42 **[ТС]**

А вот ещё как сделать, чтобы после второго нажатия появлялся следующий текст(второй) на месте первого?
Выполняется также.
Вот я нажал, появился первый и не обновляя страницу, ещё раз нажимаю на кнопку, опять появляется изображение загрузки(первого текста уже не должно быть видно) и потом появляется второй текст на месте первого.

Доктор Зойдберг · 22.12.2013, 19:48

Сколько у вас текстов, и по какому принципу их нужно менять?

@crowleyrus · 22.12.2013, 19:57 **[ТС]**

3 текста и чтобы они менялись по-порядку после каждого нажатия

Доктор Зойдберг · 23.12.2013, 03:29

Очередная борьба с тёмными областями в js привела меня к победе, кстати наверняка кривой)
Лишь бы знающие такое не видел.
ну и код можно сократить, дублирующего кода многовато, плюс в старых браузерах чтобы работала "бегущая" картинка загрузки нужно добавить свойство transform ихние.

Текста можно добавить сколько угодно, добавляете новый div и задаёте ему класс block, ну и он должен быть вложен в ваш блок tb, хотя это можно поменять.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
    <head>
        <title>Приветствие 2014</title>
        <meta charset="UTF-8">
        <style type="text/css" rel="StyleSheet">
            .gblock{width:350px; font-size:14px;border:solid 1px #000000;font-family: verdana, sans;}
            .gtitle{background:#284352; color:#ffffff;}
            #tb{width:348px;padding:2px;}
            .texttyt{background:red;width:342px; font-size:14px; padding:2px; color:#ffffff;}
                        
                        .block {display: none;}
        </style>
        <script>
                    function changeContent() {
                        rot = 0;
                    
                        var allBlock = document.getElementById('tb').getElementsByClassName('block');
                        var loadImg = document.getElementById('load');
                        var x = 0;
                        
                        for (i = 0; i < allBlock.length; i++) {
                        
                            if (allBlock[i].style.display == 'block' && i < (allBlock.length-1)) {
                                var x = 1;
                                allBlock[i].style.display = 'none';
                                loadImg.style.display = 'block';
                                var timer = setInterval(rotateImg, 100);
                                setTimeout(function() {
                                    loadImg.style.display = 'none';
                                    allBlock[i+1].style.display = 'block';
                                    clearInterval(timer);
                                }, 2000);
                                x = 1;
                                return;
                                
                            } else if (allBlock[allBlock.length-1].style.display == 'block') {
                                    var x = 1;
                                    allBlock[allBlock.length-1].style.display = 'none';
                                    loadImg.style.display = 'block';
                                    var timer = setInterval(rotateImg, 100);
                                    setTimeout(function() {
                                        loadImg.style.display = 'none';
                                        allBlock[0].style.display = 'block';
                                        clearInterval(timer);
                                    }, 2000);
                                    x = 1;
                                    return;
                                
                            } else if (i == allBlock.length-1 && x == 0) {
                                    loadImg.style.display = 'block';
                                    var timer = setInterval(rotateImg, 100);
                                    setTimeout(function() {
                                        loadImg.style.display = 'none';
                                        allBlock[0].style.display = 'block';
                                        clearInterval(timer);
                                    }, 2000);
                            }
                        }
                    }
                    
                    function rotateImg() {
                        rot = rot + 45;
                        document.getElementById('load').style.WebkitTransform = 'rotate('+rot+'deg)';
                    }
        </script>
    </head>
    <body>
            <div class="gblock">
                <div class="gtitle">
                    Блок с приветсвием
                </div>
                <div>
                     <center><input type="button" id="button" onclick="changeContent()" value="Нажми"></center>
                </div>
                <div id="tb">
                    <center><img id="load" style="display: none;" src="http://savepic.net/4081526.jpg"></center><br/>
                    <div class="block">
                    1
                    </div>
                    <div class="block">
                    2
                    </div>
                    <div class="block">
                    3
                    </div>
                    
                </div>
            </div>  
    </body>
</html>

Добавлено через 1 минуту
В мозиле не смотрел, а в IE конечно не работает transform такого вида, там по другому нужно)

@crowleyrus · 23.12.2013, 04:55 **[ТС]**

Вот теперь вообще гуд)
Спасибо Зойдберг)

@Дима_злодей · 28.12.2015, 18:45

А можно сделать например чтобы после 2 сек картинка загрузки менялась на картинку с галочкой?
О можно сделать чтобы текст появлялся не сразу а по буквам, как будто загружается, например одна буква 0.01 сек

Доктор Зойдберг · 28.12.2015, 19:45

Дима_злодей,
1-е само собой.

2-е тоже да.

google.com)

@Дима_злодей · 28.12.2015, 21:45

Поможешь пожалуйста, я сам не смогу)

Доктор Зойдберг · 28.12.2015, 23:41

Дима_злодей,
Помочь помогу, чем смогу.
Но писать за вас не буду.

1. Вместо loadImg.style.display = 'block'; (скрываем картинку)
нужно не скрывать её а loadImg.src присваивать другую и т.д.

@Дима_злодей · 28.12.2015, 23:45

А как можно реализовать чтобы текст появлялся по буквам?

Доктор Зойдберг · 29.12.2015, 02:21

Дима_злодей,
А если текста много?
0.01 это 100 символов в секунду.

Если опустить момент со временем загрузки, то можно просто взять текст в блоке в переменную, и в цикле выводить по 1 символу каждый 10 мсек.
тогда текст будет как бы набираться.

Добавлено через 1 час 57 минут
Первый вариант вроде как должен некорректно работать при больших кусках текста.
Второй вариант, я не знаю на сколько он нормален, из за использования глобальных переменных.
В любом случае, оба варианта чисто гипотетические.
Так как если кроме чистого текста в блоке будет разметка, она будет подгружаться люто-криво.

1C
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
        <script>
            function getCopy() {
                var text_input = document.getElementById('text_input');
                var text_output = document.getElementById('text_output');
                text_output.innerHTML = '';
                
                for (var i = 0; i < text_input.innerHTML.length; i++) {
                    setTimeout('text_output.innerHTML += text_input.innerHTML['+i+']', i*10);
                }
            }
 
            function start() {
                text_input = document.getElementById('text_input');
                text_output = document.getElementById('text_output');
                text_output.innerHTML = '';
                num_simbol = 0;
 
                intervalID = setInterval(getFirstSimbol, 10)
            }
 
            function getFirstSimbol() {
                if (text_input.innerHTML.length > num_simbol) {
                    text_output.innerHTML += text_input.innerHTML[num_simbol];
                    num_simbol++;
                } else {
                    clearInterval(intervalID);
                }
            }
        </script>

HTML5
1
2
3
4
5
6
7
8
9
10
<html>
    <head>
    </head>
    <body>
        <div style="background: #eee; height: 100px; width: 100%;" id="text_input">О боже, как же прекрасен этот великолепный скрипт.</div>
        <div style="background: #eef; height: 100px; width: 100%;" id="text_output"></div>
        <input type="button" onclick="getCopy();" value="setTimeout">
        <input type="button" onclick="start();" value="setInterval">
    </body>
</html>

@Дима_злодей · 29.12.2015, 20:00

Сообщение от Доктор Зойдберг

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
    <head>
        <title>Приветствие 2014</title>
        <meta charset="UTF-8">
        <style type="text/css" rel="StyleSheet">
            .gblock{width:350px; font-size:14px;border:solid 1px #000000;font-family: verdana, sans;}
            .gtitle{background:#284352; color:#ffffff;}
            #tb{width:348px;padding:2px;}
            .texttyt{background:red;width:342px; font-size:14px; padding:2px; color:#ffffff;}
                        
                        .block {display: none;}
        </style>
        <script>
                    function changeContent() {
                        rot = 0;
                    
                        var allBlock = document.getElementById('tb').getElementsByClassName('block');
                        var loadImg = document.getElementById('load');
                        var x = 0;
                        
                        for (i = 0; i < allBlock.length; i++) {
                        
                            if (allBlock[i].style.display == 'block' && i < (allBlock.length-1)) {
                                var x = 1;
                                allBlock[i].style.display = 'none';
                                loadImg.style.display = 'block';
                                var timer = setInterval(rotateImg, 100);
                                setTimeout(function() {
                                    loadImg.style.display = 'none';
                                    allBlock[i+1].style.display = 'block';
                                    clearInterval(timer);
                                }, 2000);
                                x = 1;
                                return;
                                
                            } else if (allBlock[allBlock.length-1].style.display == 'block') {
                                    var x = 1;
                                    allBlock[allBlock.length-1].style.display = 'none';
                                    loadImg.style.display = 'block';
                                    var timer = setInterval(rotateImg, 100);
                                    setTimeout(function() {
                                        loadImg.style.display = 'none';
                                        allBlock[0].style.display = 'block';
                                        clearInterval(timer);
                                    }, 2000);
                                    x = 1;
                                    return;
                                
                            } else if (i == allBlock.length-1 && x == 0) {
                                    loadImg.style.display = 'block';
                                    var timer = setInterval(rotateImg, 100);
                                    setTimeout(function() {
                                        loadImg.style.display = 'none';
                                        allBlock[0].style.display = 'block';
                                        clearInterval(timer);
                                    }, 2000);
                            }
                        }
                    }
                    
                    function rotateImg() {
                        rot = rot + 45;
                        document.getElementById('load').style.WebkitTransform = 'rotate('+rot+'deg)';
                    }
        </script>
    </head>
    <body>
            <div class="gblock">
                <div class="gtitle">
                    Блок с приветсвием
                </div>
                <div>
                     <center><input type="button" id="button" onclick="changeContent()" value="Нажми"></center>
                </div>
                <div id="tb">
                    <center><img id="load" style="display: none;" src="http://savepic.net/4081526.jpg"></center><br/>
                    <div class="block">
                    1
                    </div>
                    <div class="block">
                    2
                    </div>
                    <div class="block">
                    3
                    </div>
                    
                </div>
            </div>  
    </body>
</html>

А как сделать чтобы после появления текста исчезала кнопка?

Доктор Зойдберг · 29.12.2015, 20:38

Дима_злодей, Погуглите.

Добавлено через 7 минут
Свойство display

@Ujenus · 08.04.2016, 16:52

Всем здрасьте.
Столкнулся с подобной задачей как у автора топика. Подскажите пожалуйста, как модернизировать скрипт предложенный здесь в самом первом ответе, чтобы при нажатии на кнопку запускался таймер обратного отсчета (в предложенном выше варианте подгружается картинка), например на 1 минуту, и по окончании времени выводился текст.
Заранее спасибо!

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@crowleyrus 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 51
	22.12.2013, 18:46 [ТС]
	Спасибо, работает, но весь текст отображается вот так: �� 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	22.12.2013, 18:59
	crowleyrus, уберите <meta charset="UTF-8">. Забыл убрать. 1

@crowleyrus 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 51
	22.12.2013, 19:27 [ТС]
	ок, спасибо тебе! ) 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	22.12.2013, 19:35
	crowleyrus, да не за что! 0

@crowleyrus 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 51
	22.12.2013, 19:42 [ТС]
	А вот ещё как сделать, чтобы после второго нажатия появлялся следующий текст(второй) на месте первого? Выполняется также. Вот я нажал, появился первый и не обновляя страницу, ещё раз нажимаю на кнопку, опять появляется изображение загрузки(первого текста уже не должно быть видно) и потом появляется второй текст на месте первого. 0

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	22.12.2013, 19:48
	Сколько у вас текстов, и по какому принципу их нужно менять? 0

@crowleyrus 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 51
	22.12.2013, 19:57 [ТС]
	3 текста и чтобы они менялись по-порядку после каждого нажатия 0

@crowleyrus 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 51
	23.12.2013, 04:55 [ТС]
	Вот теперь вообще гуд) Спасибо Зойдберг) 0

@Дима_злодей 1 / 1 / 0 Регистрация: 06.08.2015 Сообщений: 113
	28.12.2015, 18:45
	А можно сделать например чтобы после 2 сек картинка загрузки менялась на картинку с галочкой? О можно сделать чтобы текст появлялся не сразу а по буквам, как будто загружается, например одна буква 0.01 сек 0

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	28.12.2015, 19:45
	Дима_злодей, 1-е само собой. 2-е тоже да. google.com) 1

@Дима_злодей 1 / 1 / 0 Регистрация: 06.08.2015 Сообщений: 113
	28.12.2015, 21:45
	Поможешь пожалуйста, я сам не смогу) 0

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	28.12.2015, 23:41
	Дима_злодей, Помочь помогу, чем смогу. Но писать за вас не буду. 1. Вместо loadImg.style.display = 'block'; (скрываем картинку) нужно не скрывать её а loadImg.src присваивать другую и т.д. 1

@Дима_злодей 1 / 1 / 0 Регистрация: 06.08.2015 Сообщений: 113
	28.12.2015, 23:45
	А как можно реализовать чтобы текст появлялся по буквам? 0

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	29.12.2015, 20:38
	Дима_злодей, Погуглите. Добавлено через 7 минут Свойство display 0

@Ujenus 0 / 0 / 0 Регистрация: 08.04.2016 Сообщений: 1
	08.04.2016, 16:52
	Всем здрасьте. Столкнулся с подобной задачей как у автора топика. Подскажите пожалуйста, как модернизировать скрипт предложенный здесь в самом первом ответе, чтобы при нажатии на кнопку запускался таймер обратного отсчета (в предложенном выше варианте подгружается картинка), например на 1 минуту, и по окончании времени выводился текст. Заранее спасибо! 0