Постепенное увеличение размера дива и размера шрифта вложенного текста

@phpk · Регистрация: 15.05.2013

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

Имеется див с текстом внутри.
Как сделать, чтобы при загрузке страницы на экране было сначало пусто, т.е. размер дива и текста 0.
Потом надо, чтобы див с текстом постепенно увеличивался.
Т.е. надо увеличить масштаб.
Как это сделать?

@mazahist · 06.11.2014, 16:56

HTML5
1
2
3
4
<style>
#di{width:0px; height:0px; font-size:0px; border:1px solid #232021;}
</style>
<div id="di">Некий текст</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var d=document.getElementById("di"),max_font=40,max_width=400, max_height=70,kill1=false,kill2=false,kill3=false,
w,h,f;
var int=setInterval(function()
{
    if(parseInt(getComputedStyle(d).width)<max_width)
    {
        w=parseInt(getComputedStyle(d).width)+10;
        d.style.width=w+"px";
    }else{kill1=true}
    if(parseInt(getComputedStyle(d).height)<max_height)
    {
        h=parseInt(getComputedStyle(d).height)+2;
        d.style.height=h+"px";
    }else{kill2=true}
    if(parseInt(getComputedStyle(d).fontSize)<max_font)
    {
        f=parseInt(getComputedStyle(d).fontSize)+1;
        d.style.fontSize=f+"px";
    }else{kill3=true}
    
    if(kill1===true && kill2===true && kill3===true)clearInterval(int);
},50);

@phpk · 06.11.2014, 23:48 **[ТС]**

у меня что-то не работает вышеприведённый код:

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1</title>
  <style>
      #di {
        width:0px; height:0px; font-size:0px; border:1px solid #232021;
    }
</style>
 
<script>
    var d=document.getElementById("di");
    var max_font=40, max_width=400, max_height=70,kill1=false,kill2=false,kill3=false,w,h,f;
 
    function func(){
        if(parseInt(getComputedStyle(d).width)<max_width)
        {
        // alert(getComputedStyle(d).width);
        w=parseInt(getComputedStyle(d).width)+10;
        d.style.width=w+"px";
    }else{kill1=true}
    if(parseInt(getComputedStyle(d).height)<max_height)
    {
        h=parseInt(getComputedStyle(d).height)+2;
        d.style.height=h+"px";
    }else{kill2=true}
    if(parseInt(getComputedStyle(d).fontSize)<max_font)
    {
        f=parseInt(getComputedStyle(d).fontSize)+1;
        d.style.fontSize=f+"px";
    }else{kill3=true}
 
    if(kill1==true && kill2==true && kill3==true) clearInterval(interval);
 
}
var interval=setInterval(func,50);
 
</script>
</head>
<body>
 
    <div id="di">Некий текст</div>
 
</body>
</html>

@kalabuni · 06.11.2014, 23:56

phpk, весь скриптовой блок (строки 12-39 вашего кода) поместите между строками 44 и 45

@phpk · 07.11.2014, 00:02 **[ТС]**

А что это было?
Т.е. почему так влияет расположение <script> ?
Благодарю за подсказку кстати

@kalabuni · 07.11.2014, 00:15

Сообщение от phpk

почему так влияет расположение <script> ?

браузер прочитывает (и исполняет) код построчно, сверху вниз

когда он читает строку, где написано var d=document.getElementById("di");, браузер уже должен знать, всё про тег с id="di", а в вашем варианте строка <div id="di">Некий текст</div> находится значительно ниже и браузер до неё еще "не дочитал"

@phpk · 07.11.2014, 00:19 **[ТС]**

просто где-то читал, что скрипт рекомендуется применять в заголовке <head>

@kalabuni · 07.11.2014, 00:27

Сообщение от phpk

просто где-то читал, что скрипт рекомендуется применять в заголовке <head>

можно и в заголовке, но тогда весь код надо обернуть в функцию, запускаемую по событию onload

итак:
-- либо <тег> и ниже него <script>js-код, где происходит обращение к этому тегу</script>

-- либо <script>onload = function () {js-код, где происходит обращение к тегу}</script>
и потом в любом месте <тег>

PS скрипт-код, размещённый в заголовке, исполнится обязательно, в отличие от скрипт-кода, размещённого в ином месте страницы, поэтому и рекомендуется

@phpk · 07.11.2014, 00:43 **[ТС]**

скрипт-код, размещённый в заголовке, исполнится обязательно, в отличие от скрипт-кода, размещённого в ином месте страницы

не поймите за настырность, но из вашего последнего высказывания я понял, что скрипт, расположеный вне заголовка не обязательно выполнится. В каких случаях он не выполнится?
Просто на начальном этапе изучения JS для меня важна каждая мелочь.
Ведь браузер все равно дойдет до скрипта, как в вышеприведенном коде!

Новые блоги и статьи Все статьи Все блоги /
Protobuf в Go и новый Opaque API golander 15.03.2025 Распределенные системы опираются на эффективные протоколы обмена данными — о чем вы, скорее всего, прекрасно знаете, если работаете с микросервисной архитектурой. Protocol Buffers (Protobuf) от. . .	Преобразование строк в C++: std::from_chars от C++17 до C++26 NullReferenced 15.03.2025 Конвертация строк в числа — задача, с которой сталкивается практически каждый C++ разработчик. Несмотря на кажущуюся простоту, эта операция таит множество подводных камней и неочевидных последствий. . .	Управление памятью в Java и новые сборщики мусора Javaican 15.03.2025 Эффективное управление памятью всегда было ахиллесовой пятой высоконагруженных Java-приложений. При разработке на Java мы обычно полагаемся на автоматическое управление памятью через сборщики мусора. . .	Angular или Svelte - что выбрать? Reangularity 15.03.2025 Во фронтенд-разработке Angular и Svelte представляют собой два совершенно разных подхода к решению схожих задач. Один — полноценный, мощный монолит с корпоративной поддержкой, другой — компактный,. . .	Spring Cloud микросервисы: обнаружение и отслеживание Javaican 15.03.2025 В разработке корпоративных приложений всё больше команд обращают внимание на микросервисную архитектуру. Но с этой архитектурой приходят и специфичные трудности: как сервисам находить друг друга в. . .
Запуск контейнера Docker в облаке Mr. Docker 15.03.2025 Что такое Docker-контейнер? Если коротко — это легковесный, автономный пакет, содержащий всё необходимое для запуска приложения: код, зависимости, библиотеки и конфигурации. Когда мы говорим о. . .	Осваиваем Kubernetes: Подробная шпаргалка Mr. Docker 15.03.2025 Kubernetes — это открытая платформа для автоматизации развертывания, масштабирования и управления контейнеризированными приложениями. Он был создан для решения проблем, с которыми сталкиваются. . .	Лучшие PHP REST API фреймворки Jason-Webb 15.03.2025 Современные PHP REST API фреймворки предлагают большой набор функциональности: от автоматической валидации данных и управления маршрутизацией до генерации документации и интеграции с различными. . .	Многопоточность в Java с Project Loom: виртуальные или обычные потоки Javaican 15.03.2025 Многопоточность всегда была одноим из основных элементов в разработке современного программного обеспечения. Она позволяет приложениям обрабатывать несколько задач одновременно, что критично для. . .	Что нового в Swift 6 и особенности миграции mobDevWorks 15.03.2025 Swift 6 — это новый крупный релиз языка программирования от Apple, анонсированный на WWDC 2024. Если вы следили за эволюцией Swift, то наверняка заметили, что многие значимые возможности, которые. . .

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
		1
	Постепенное увеличение размера дива и размера шрифта вложенного текста 06.11.2014, 14:04. Показов 3325. Ответов 8 Метки нет (Все метки) Имеется див с текстом внутри. Как сделать, чтобы при загрузке страницы на экране было сначало пусто, т.е. размер дива и текста 0. Потом надо, чтобы див с текстом постепенно увеличивался. Т.е. надо увеличить масштаб. Как это сделать? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,626
	06.11.2014, 23:56	4
	phpk, весь скриптовой блок (строки 12-39 вашего кода) поместите между строками 44 и 45 1

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	07.11.2014, 00:02 [ТС]	5
	А что это было? Т.е. почему так влияет расположение <script> ? Благодарю за подсказку кстати 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,626
	07.11.2014, 00:15	6
	Сообщение от phpk почему так влияет расположение <script> ? браузер прочитывает (и исполняет) код построчно, сверху вниз когда он читает строку, где написано var d=document.getElementById("di");, браузер уже должен знать, всё про тег с id="di", а в вашем варианте строка <div id="di">Некий текст</div> находится значительно ниже и браузер до неё еще "не дочитал" 1

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	07.11.2014, 00:19 [ТС]	7
	просто где-то читал, что скрипт рекомендуется применять в заголовке <head> 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,626
	07.11.2014, 00:27	8
	Сообщение от phpk просто где-то читал, что скрипт рекомендуется применять в заголовке <head> можно и в заголовке, но тогда весь код надо обернуть в функцию, запускаемую по событию onload итак: -- либо <тег> и ниже него <script>js-код, где происходит обращение к этому тегу</script> -- либо <script>onload = function () {js-код, где происходит обращение к тегу}</script> и потом в любом месте <тег> PS скрипт-код, размещённый в заголовке, исполнится обязательно, в отличие от скрипт-кода, размещённого в ином месте страницы, поэтому и рекомендуется 1

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	07.11.2014, 00:43 [ТС]	9
	скрипт-код, размещённый в заголовке, исполнится обязательно, в отличие от скрипт-кода, размещённого в ином месте страницы не поймите за настырность, но из вашего последнего высказывания я понял, что скрипт, расположеный вне заголовка не обязательно выполнится. В каких случаях он не выполнится? Просто на начальном этапе изучения JS для меня важна каждая мелочь. Ведь браузер все равно дойдет до скрипта, как в вышеприведенном коде! 0

Опции темы