Как правильно вычислить координаты?

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

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

Имеется отцентрированная рамка с надписью "HTML 5", и справа у края экрана цифра 5.
Эта цифра с помощью скрипта передвигается влево на место той цифры, которая стоит в надписи "HTML 5".
Так вот, как правильно вычислить координаты этой цифры? Т.е. нужно, чтобы передвигающаяся цифра встала ровно на место цифры в надписи!
У меня постоянно получается цифра или немного ниже или немного выше на несколько пикселов

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5</title>
        <meta charset='utf-8'>
        <style>
            .header {
                text-align: center;
            }
            .head {
                opacity: 0.0;           //эффект постепенного появления надписи "HTML 5"
                color: grey;
                font-size: 5em;
                border:4px outset black;
                border-radius: 10px;
                display: inline-block;
                background-color: white;
                width:400px;
                height: 200px;
                position: relative;
            }
            
            #span5 {
                display: inline-block;
                position: relative;
            }
        </style>
        
        <script>
            //window.onload=f;
            
            var flag=true;
            var x;
            
            function f(){                       //эффект постепенного появления надписи "HTML 5"
                var tbl=document.getElementById('tble');
                var stl=getComputedStyle(tble,'');
                x=stl.opacity;
                x=parseFloat(x,10);
                if(x<1) x+=0.1;
                tbl.style.opacity=x;
                if(x==1) {
                    clearInterval(intervId);
                    f5();
                }
            }
            var intervId=setInterval("f()",250);
 
            function f5(){                                // создание цифры 5
                var tbl=document.getElementById('tble');
                //var H=document.getElementById('h');
                var y=tbl.offsetTop;
                while (tbl){                        //вот здесь неполучается вычислить координаты
                    y+=tbl.offsetTop;
                    alert(y+'  '+tbl+'  '+tbl.id);
                    tbl=tbl.offsetParent;
                }
                x=screen.width;
                var new5=document.createElement('div');
                new5.id='m5';
                new5.innerHTML='5';
                new5.style.position='absolute';
                new5.style.color='gray';
                new5.style.fontSize='5em';
                document.body.appendChild(new5);
                new5.style.left=(x-new5.offsetWidth)+'px';
                new5.style.top=y+'px';
                intervId=setInterval('move5()',50);
                
            }
            function move5(){                                // перемещение цифры
                var new5=document.getElementById('m5');
                var span=document.getElementById('span5');
                sX=span.offsetLeft;
                //alert(sX);
                x=new5.style.left;
                x=parseInt(x,10);
                x-=20;
                new5.style.left=x+'px';
                if(x<=800) clearInterval(intervId);
            }
 
            
            
        </script>
    </head>
 
    <body>
    
 
        <div id='h' class="header">
            <div id="tble" class='head'>
                <table id='_table' style="width:100%;height:100%;vertical-align:middle;text-align:center">
                    <tr>
                        <td id='_td'><span id="spanHTML">HTML <span id='span5'>5</span></span></td>
                    </tr>
                </table>
            </div>
                
        </div>
<!--//////////////////////////////////////////////////////////////////-->
        
 
    </body>
</html>

Добавлено через 4 часа 22 минуты
ну подскажите пожалуйста, хотя-бы намекните

@BANO · 26.10.2014, 15:29

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

а чё убрал window.onload?

в 37 строке по идее
var stl=getComputedStyle(tbl,"");
ну как я понял

Добавлено через 6 минут
ты надпись центрируешь в css а букву перемещаешь в js
это не по русски

ты либо узнавай всё с помощью window.screen.availHeight
а потом вычисляй координаты

@phpk · 26.10.2014, 15:45 **[ТС]**

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

ты либо узнавай всё с помощью window.screen.availHeight
а потом вычисляй координаты

этот screen.availHeight мне ещё не знаком. А пример можно? Что-то в инете подходящего примера не нашёл

@BANO · 26.10.2014, 15:50

вот что получилось у меня

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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <style>
        .header {
            text-align: center;
        }
        .head {
 
            color: grey;
            font-size: 5em;
            border:4px outset black;
            border-radius: 10px;
            display: inline-block;
            background-color: white;
            width:400px;
            height: 200px;
            position: relative;
        }
 
        #cufra {
            -webkit-animation: move 100s ease-in-out infinite;
            position: absolute;
 
        }
        @keyframes move {
            0% {
                left: 1000px;
            }
            100% {
                left: 0px;
            }
        }
    </style>
 
    <!--<script>
        window.onload=f;
 
 
        var flag=true;
        var x;
 
        function f(){                       //эффект постепенного появления надписи "HTML 5"
            var tbl=document.getElementById('tble');
            var stl=getComputedStyle(tbl,'');
            x=stl.opacity;
            x=parseFloat(x , 10);
            if(x<1) x+=0.1;
            tbl.style.opacity=x;
            if(x==1) {
                clearInterval(intervId);
                f5();
            }
        }
        var intervId=setInterval("f()",250);
 
        function f5(){                                // создание цифры 5
            var tbl=document.getElementById('tble');
            //var H=document.getElementById('h');
            var y=tbl.offsetTop;
            while (tbl){                        //вот здесь неполучается вычислить координаты
                y+=tbl.offsetTop;
                alert(y+'  '+tbl+'  '+tbl.id);
                tbl=tbl.offsetParent;
            }
            x=screen.width;
            var new5=document.createElement('div');
            new5.id='m5';
            new5.innerHTML='5';
            new5.style.position='absolute';
            new5.style.color='gray';
            new5.style.fontSize='5em';
            document.body.appendChild(new5);
            new5.style.left=(x-new5.offsetWidth)+'px';
            new5.style.top=y+'px';
            intervId=setInterval('move5()',50);
 
        }
        function move5(){                                // перемещение цифры
            var new5=document.getElementById('m5');
            var span=document.getElementById('span5');
            sX=span.offsetLeft;
            //alert(sX);
            x=new5.style.left;
            x=parseInt(x,10);
            x-=20;
            new5.style.left=x+'px';
            if(x<=800) clearInterval(intervId);
        }
 
 
 
    </script>-->
</head>
 
<body>
 
 
<div id='h' class="header">
    <div id="tble" class='head'>
        <table id='_table' style="width:100%;height:100%;vertical-align:middle;text-align:center">
            <tr>
                <td id='_td'><span id="spanHTML">HTML <span id='span5'>5<span id="cufra">5</span></span></span></td>
            </tr>
        </table>
    </div>
 
</div>
<!--//////////////////////////////////////////////////////////////////-->
 
 
</body>
</html>

и всё же используй для таких целеё что то одно

@phpk · 26.10.2014, 16:10 **[ТС]**

а что в приведённом коде должно происходить?
У меня просто надпись "HTML 5 5". Никаких перемещёний
В чём смысл?

Добавлено через 9 минут
Меня больше интересует мой метод, т.е. средствами Javascript. Там по идее я всего лишь несколько лишних пикселей прибавил. Вопрос всего в пару пикселей. Как их вычислить? Наверно лишние границы прибавил

@BANO · 26.10.2014, 20:29

phpk, объясняю ты надпись html 5 центруешь через css параметром text-align а цифру ты пытаешься
сделать это для браузера
у меня разрешение может быть отличное от твоего и у пользователей может быть
ты либо делай через

JavaScript
1
window.screen.availWidth

или через css вот примерно так ссылка
ну тут надо немного просчитать проценты но версия уже хотя бы рабочая

а так советую делать анимацию в css а не в js так как в css это удобнее и более продуктивно

@phpk · 26.10.2014, 20:38 **[ТС]**

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

у меня разрешение может быть отличное от твоего и у пользователей может быть
ты либо делай через

так я делал через

JavaScript
1
x=screen.width;

это большая разница?

@BANO · 26.10.2014, 20:49

смотри css вычисляет всё автоматом, в js тебе вычислять надо, а em насколько я знаю не фиксированная вещи
ты либо делаешь всё жёстко так называемой "жёсткой вёрсткой" что плохо, так как ты делаешь под себя одного единственного, а можешь делать резиновой вёрсткой что лучше (этот форум сделан резиновой вёрсткой)
и через js можно потерпеть фиаско от ошибок типо твоей
а css могут быть только орфографические ошибки
я тут советую css так как меньше нагрузки на интерпретатор

Добавлено через 2 минуты
ну если хочешь делай через js дело твоё только шагов до чёрта будет

@phpk · 26.10.2014, 21:48 **[ТС]**

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

ну если хочешь делай через js дело твоё только шагов до чёрта будет

для начала чтобы сделать форум нужен хоть какой-то опыт, которого у меня нет, иначе я бы тут не просил бы помощи!
Я не отрицаю что с помощью css лучше. Это совсем другой вопрос.
А сейчас меня интересует реализация на Javascript

Добавлено через 28 минут

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

а так советую делать анимацию в css а не в js так как в css это удобнее и более продуктивно

говориш лучше делать на css? Кстати, как тогда вычислить координату цифры 5, чтобы анимировать её с помощью @keyframes и animation ? Ведь её нужно всё равно расположить на одной линии с надписью "HTML 5"!

@ludmila-sv · 27.10.2014, 18:44

JavaScript
1
2
3
4
5
6
7
8
               var tbl=document.getElementById('tble');
                //var H=document.getElementById('h');
                var y=tbl.offsetTop;
                while (tbl){                        //вот здесь не получается вычислить координаты
                    y+=tbl.offsetTop;
                    alert(y+'  '+tbl+'  '+tbl.id);
                    tbl=tbl.offsetParent;
                }

Вот тут Вы, конечно, намудрили.
Во-первых, откуда считается у? Так как новый элемент должен встать на место <span id='span5'>, то и верхний отступ надо считать от <span id='span5'>, т.е.

JavaScript
1
2
var span5=document.getElementById('span5');
var y=span5.offsetTop;

Далее. Смысл цикла while в том, чтобы пройти вверх по цепочке родительских элементов и приплюсовать все их верхние отступы к у. Поэтому надо не заменять указатель элемента его верхним отступом tbl=tbl.offsetParent; а подниматься на один родительский элемент вверх:

JavaScript
1
2
3
4
while (span5){                        //вот здесь не получается вычислить координаты
span5=span5.parentNode;
y+=span5.offsetTop;
}

Так по крайней мере логичнее, но так тоже не работает)))
Сейчас выложу рабочий вариант.

Добавлено через 18 минут
Рабочий вариант: основные исправления.

1. Чтобы не мучиться с вертикальным выравниванием, логичнее помещать новую цифру 5 в тот же контейнер, что и старая, т.е. в <span id="spanHTML">

JavaScript
1
2
var spanHTML=document.getElementById('spanHTML');
spanHTML.appendChild(new5);

2. Чтобы позиция отсчитывалась относительно этого элемента, надо добавить

CSS
1
#spanHTML {position: relative;}

3. Начальные координаты:

JavaScript
1
2
new5.style.left=(x/2-new5.offsetWidth+spanHTML.offsetWidth/2)+'px';
new5.style.top=span5.offsetTop+'px';

4. Движение
а) Чтоб элемент не уехал влево: if(x<sX) x=sX;
б) остановка анимации : if(x<=sX) clearInterval(intervId);

5. Единственное, что не доделано - размер шрифта пришлось поставить в пикселях.

6. И еще один момент исправлять не стала, а надо бы. У Вас функция запускается как var intervId=setInterval("f()",250);
Т.е. браузер не дожидается окончания загрузки страницы, а просто через 250 миллисекунд после открытия страницы запускает f(). Если интернет быстрый и за это время страница успевает загрузиться, всё хорошо, а если нет - будут ошибки - функция не будет находить то, что ищется с помощью getElementById .

Весь код:

Кликните здесь для просмотра всего текста

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
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
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5</title>
        <meta charset='utf-8'>
        <style>
            .header {
                text-align: center;
            }
            .head {
                opacity: 0.0;           //эффект постепенного появления надписи "HTML 5"
                color: grey;
                font-size: 40px;
                border:4px outset black;
                border-radius: 10px;
                display: inline-block;
                background-color: white;
                width:400px;
                height: 200px;
                position: relative;
            }
            
            #span5 {
                display: inline-block;
                position: relative;
            }
            #spanHTML {position: relative;}
        </style>
        
        <script>
            //window.onload=f;
            
            var flag=true;
            var x;
            var intervId=setInterval("f()",250);
            
            function f(){                       //эффект постепенного появления надписи "HTML 5"
                var tbl=document.getElementById('tble');
                var stl=getComputedStyle(tble,'');
                x=stl.opacity;
                x=parseFloat(x,10);
                if(x<1) x+=0.1;
                tbl.style.opacity=x;
                if(x==1) {
                    clearInterval(intervId);
                    f5();
                }
            }
 
            function f5(){                                // создание цифры 5
                var span5=document.getElementById('span5');
                var spanHTML=document.getElementById('spanHTML');
                
                x=screen.width;
                var new5=document.createElement('div');
                new5.id='m5';
                new5.innerHTML='5';
                new5.style.position='absolute';
                new5.style.color='red';
                new5.style.fontSize='40px';
                spanHTML.appendChild(new5);
                new5.style.left=(x/2-new5.offsetWidth+spanHTML.offsetWidth/2)+'px';
                new5.style.top=span5.offsetTop+'px';
                intervId=setInterval('move5()',50);
                
            }
            function move5(){                                // перемещение цифры
                var new5=document.getElementById('m5');
                var span=document.getElementById('span5');
                sX=span.offsetLeft;
                //alert(sX);
                x=new5.style.left;
                x=parseInt(x,10);
                x-=20;
                if(x<sX) x=sX;
                new5.style.left=x+'px';
                if(x<=sX) clearInterval(intervId);
            }
 
            
            
        </script>
    </head>
 
    <body>
    
 
        <div id='h' class="header">
            <div id="tble" class='head'>
                <table id='_table' style="width:100%;height:100%;vertical-align:middle;text-align:center">
                    <tr>
                        <td id='_td'><span id="spanHTML">HTML <span id='span5'>5</span></span></td>
                    </tr>
                </table>
            </div>
                
        </div>
<!--//////////////////////////////////////////////////////////////////-->
        
 
    </body>
</html>

Добавлено через 10 минут
И лучше использовать screen.availWidth, а не screen.width

@phpk · 27.10.2014, 18:45 **[ТС]**

Супер! Благодарю!!!!!!!!!!!!!!!

@ludmila-sv · 27.10.2014, 18:49

Поправила шрифт: вот это

JavaScript
1
new5.style.fontSize='40px';

уберите вообще.
А в css поставьте, как было

CSS
1
2
3
4
5
.head {
                opacity: 0.0;           
                color: grey;
                font-size: 5em;
 и т.д.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.10.2014, 15:29
	смотри что у меня получилось из твоего кода тут легче понять что не робит ссылка а чё убрал window.onload? в 37 строке по идее var stl=getComputedStyle(tbl,""); ну как я понял Добавлено через 6 минут ты надпись центрируешь в css а букву перемещаешь в js это не по русски ты либо узнавай всё с помощью window.screen.availHeight а потом вычисляй координаты 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	26.10.2014, 16:10 [ТС]
	а что в приведённом коде должно происходить? У меня просто надпись "HTML 5 5". Никаких перемещёний В чём смысл? Добавлено через 9 минут Меня больше интересует мой метод, т.е. средствами Javascript. Там по идее я всего лишь несколько лишних пикселей прибавил. Вопрос всего в пару пикселей. Как их вычислить? Наверно лишние границы прибавил 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.10.2014, 20:49
	смотри css вычисляет всё автоматом, в js тебе вычислять надо, а em насколько я знаю не фиксированная вещи ты либо делаешь всё жёстко так называемой "жёсткой вёрсткой" что плохо, так как ты делаешь под себя одного единственного, а можешь делать резиновой вёрсткой что лучше (этот форум сделан резиновой вёрсткой) и через js можно потерпеть фиаско от ошибок типо твоей а css могут быть только орфографические ошибки я тут советую css так как меньше нагрузки на интерпретатор Добавлено через 2 минуты ну если хочешь делай через js дело твоё только шагов до чёрта будет 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	27.10.2014, 18:45 [ТС]
	Супер! Благодарю!!!!!!!!!!!!!!! 0

Как правильно вычислить координаты?

Решение