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

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

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

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

@mazahist · 06.11.2014, 16:56

HTML5

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

Javascript

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

<!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 для меня важна каждая мелочь.
Ведь браузер все равно дойдет до скрипта, как в вышеприведенном коде!

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

@kalabuni супермизантроп 3940 / 2978 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	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 супермизантроп 3940 / 2978 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	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 супермизантроп 3940 / 2978 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	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

Опции темы