Обмен готовыми решениями - JavaScript - Страница 2

@newJS · 28.02.2013, 20:31

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

Все курсоры в браузерах.

PHP/HTML
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Курсоры на странице.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
        <style type="text/css">
            body {
                background: window;
            }
            .rig {
                background: lightblue;
                margin: 5px 0 0 0;
                border: 1px solid green;
                text-align: right;
                padding: 3px 7px 5px 7px;
            }
            div div {
                float: left;
                text-align: left;
            }
        </style>
        <script type="text/javascript">
            onload = function() { //раздаём клики первым ДИВам в паре
                var obj, i, l;
                obj = document.getElementsByTagName("div");
                l = obj.length;
                for (i = 1; i != l; i += 2) {
                    obj[i].onclick = mClick;
                };
            };
            function mClick() { //выделяем по клику
                var obj, r, s;
                obj = this.getElementsByTagName("span")[0]
                if (document.createRange) {
                    r = document.createRange();
                    r.selectNode(obj);
                    s = window.getSelection();
                    s.removeAllRanges();
                    s.addRange(r);
                } else {
                    r = document.body.createTextRange();
                    r.moveToElementText(obj);
                    r.select();
                    r.execCommand("Copy");
                }; //осёл копирует в буфер
            };
        </script>
    </head>
    <body>
        <div style="color:blue; text-align:center;">Плавно ведём мышкой между текстом, смотрим на курсор. Щелчок по строке выделяет CSS код, ИЕ его сразу копирует.</div>
        <div class="rig" style="cursor:all-scroll;" title="Кроме Opera. 
Показывает на возможность скроллинга страницы в любом направлении.">
            <div>1.** Стрелки во все четыре стороны и точкой в центре</div><span> cursor:all-scroll;</span></div>
        <div class="rig" style="cursor:auto;" title="Браузер определяет самостоятельно, какой курсор требуется в данном контексте.">
            <div>2.** Авто</div><span>cursor:auto;</span></div>
        <div class="rig" style="cursor:col-resize;" title="Кроме Opera. 
Используется для индикации возможности изменения размеров по горизонтали.">
            <div>3.** Стрелки влево-вправо и вертикальной разделяющей полоской</div><span>cursor:col-resize;</span></div>
        <div class="rig" style="cursor:crosshair;" title="Позволяет точно навести перекрестье на цель.">
            <div>4.** Тонкий крест</div><span>cursor:crosshair;</span></div>
        <div class="rig" style="cursor:default;" title="Стандартный курсор, используемый системой.">
            <div>5.** Полная стрелка (default)</div><span>cursor:default;</span></div>
        <div class="rig" style="cursor:hand;" title="Только IE и Opera.">
            <div>6.** Рука</div><span>cursor:hand;</span></div>
        <div class="rig" style="cursor:help;" title="Стрелка с вопросительным знаком.">
            <div>7.** Помощь</div><span>cursor:help;</span></div>
        <div class="rig" style="cursor:move;" title="Курсор с 4 стрелками, показывающий возможность перемещения.">
            <div>8.** Стрелка, четыре стороны света</div><span>cursor:move;</span></div>
        <div class="rig" style="cursor:no-drop;" title="Только IE, в Opera нет, в остальных без руки. 
Нельзя сбросить объект в текущую позицию курсора.">
            <div>9.** Рука с перечёркнутым кружочком</div><span>cursor:no-drop;</span></div>
        <div class="rig" style="cursor:not-allowed;" title="Кроме Opera. 
Данная операция не поддерживается. Кружок прозрачный.">
            <div>10. Перечёркнутый круг</div><span>cursor:not-allowed;</span></div>
        <div class="rig" style="cursor:pointer;" title="Кроссбраузерно.">
            <div>11. Рука</div><span>cursor:pointer;</span></div>
        <div class="rig" style="cursor:progress;" title="Песочные часы, показывающие на продолжение операции.">
            <div>12. Стрелка с часами</div><span>cursor:progress;</span></div>
        <div class="rig" style="cursor:row-resize;" title="Кроме Opera. 
Используется для индикации возможности изменения размеров по вертикали.">
            <div>13. Стрелки вверх-вниз и вертикальной разделяющей полоской</div><span>cursor:row-resize;</span></div>
        <div class="rig" style="cursor:text;" title="Текстовый курсор-каретка.">
            <div>14. Текст</div><span>cursor:text;</span></div>
        <div class="rig" style="cursor:url('news.cur');" title="Только IE. 
Ваш собственный курсор. Поддерживаются файлы *.cur и *.ani">
            <div>15. Курсор-картинка</div><span>cursor:url('*.cur *.ani');</span></div>
        <div class="rig" style="cursor:vertical-text;" title="Кроме Opera. 
Горизонтальная текстовая каретка для вертикального текста.">
            <div>16. Вертикальный текст</div><span>cursor:vertical-text;</span></div>
        <div class="rig" style="cursor:wait;" title="Курсор, показывающий, что система занята и требуется подождать.">
            <div>17. Часы</div><span>cursor:wait;</span></div>
        <div class="rig" style="cursor:e-resize;" title="">
            <div>18. Стрелка лево-право (East)</div><span>cursor:e-resize;</span></div>
        <div class="rig" style="cursor:w-resize;" title="">
            <div>19. Стрелка лево-право (West)</div><span>cursor:w-resize;</span></div>
        <div class="rig" style="cursor:ne-resize;" title="">
            <div>20. Стрелка лево-низ-право-верх (North East)</div><span>cursor:ne-resize;</span></div>
        <div class="rig" style="cursor:sw-resize;" title="">
            <div>21. Стрелка лево-низ-право-верх (South West)</div><span>cursor:sw-resize;</span></div>
        <div class="rig" style="cursor:nw-resize;" title="">
            <div>22. Стрелка лево-верх-право-низ (North West)</div><span>cursor:nw-resize;</span></div>
        <div class="rig" style="cursor:se-resize;" title="">
            <div>24. Стрелка лево-верх-право-низ (South East)</div><span>cursor:se-resize;</span></div>
        <div class="rig" style="cursor:n-resize;" title="">
            <div>25. Стрелка верх-низ (North)</div><span>cursor:n-resize;</span></div>
        <div class="rig" style="cursor:s-resize;" title="">
            <div>26. Стрелка верх-низ (South)</div><span>cursor:s-resize;</span></div>
    </body>
</html>

@EPMAK · 06.03.2013, 18:30

col-resize, row-resize. В первый раз вижу.

Добавлено через 8 минут
кур-ы для мозиллы. может пригодится. https://developer.mozilla.org/... CSS/cursor

zhibirc · 15.03.2013, 21:44

Иногда обращаются с просьбой помочь реализовать тесты с различной формой ответов. Вот мой простенький недавно написанный скрипт, возможно он окажется кому-то полезен. Делал .hta, поэтому собрал все в один файл, чтобы было аккуратно, в том числе минимизированную продакшн jQuery (здесь я вместо нее вставил соответствующий комментарий, чтобы не забыли подключить).

PHP/HTML
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
            // тут либо размещаем код jQuery либо подключаем внешнюю через тег
 
        </script>
        <script type="text/javascript">
            function getMark() {
                $('#result').show('fast', function() {
                    var username = document.test.nm.value,
                        wrongans = new Array(),
                        markcount = 0,
                        sh = document.test;
                    sh.elements[3].checked ? markcount++ : wrongans.push(1)
                    sh.elements[5].checked ? markcount++ : wrongans.push(2)
                    sh.elements[10].checked ? markcount++ : wrongans.push(3)
                    sh.elements[11].checked && sh.elements[14].checked ? markcount++ : wrongans.push(4)
                    sh.elements[15].checked && sh.elements[17].checked && sh.elements[18].checked ? markcount++ : wrongans.push(5)
                    sh.elements[21].checked ? markcount++ : wrongans.push(6)
                    sh.elements[22].checked && sh.elements[24].checked ? markcount++ : wrongans.push(7)
                    sh.elements[29].checked ? markcount++ : wrongans.push(8)
                    sh.elements[31].checked ? markcount++ : wrongans.push(9)
                    sh.elements[36].checked ? markcount++ : wrongans.push(10)
                    sh.elements[40].checked ? markcount++ : wrongans.push(11)
                    sh.elements[43].checked ? markcount++ : wrongans.push(12)
                    document.getElementById('result').innerHTML = username + ', Ваш результат: <font color="#ff0000">' + markcount + '</font> правильных ответов из 12 возможных.';
                    wrongans.toString() != '' ? document.getElementById('result').innerHTML += '<br>Вы неправильно ответили на вопросы: <font color="#ff0000">' + wrongans + '</font>.' : document.getElementById('result').innerHTML += '<br>Все ответы верны, но не останавливайтесь на достигнутом! <span class="img"></span>'
                });
            }
 
            function hideResult() {
                $('#result').hide('fast');
            }
 
        </script>
        <style type="text/css">
            body {
                background-color: #778899;
                font-family: Verdana, sans-serif;
            }
            
            h2 {
                text-align: center;
                text-decoration: underline;
            }
            
            .ques {
                font-weight: bold;
                font-size: 120%;
                color: #7cfc00;
            }
            
            .name {
                font-weight: bold;
                font-size: 120%;
            }
            
            input[type="button"],
            [type="reset"] {
                width: 100px;
                height: 35px;
                border-radius: 2px;
                margin: 5px;
                font-weight: bold;
            }
            
            #result {
                background-color: #000000;
                font-weight: bold;
                color: #778899;
                border-radius: 2px;
                display: none;
                float: left;
                margin-bottom: 10px;
            }
            
            .img {
                display: inline-block;
                background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFE0lEQVR42sVVa0yTZxQ+vcBYArolEzTK4nRjy5YxgRTcZj9NNOJlbN4WNoMLc5PFGfdvxviDKojiREQcKtahU7xEnYo4lTuCwwqFttzpjRYoXkCBcikt0mfv1+KFodPtj2/yJP2+95znOef0ed+P6GUvZTp55MeR5MZOWlOZIt5UmSrepEimmOLtJOH3/jdx1g7yKUsSxzadmG5qz5M6u8pXoFu1Ct3qVeiq+BK3Czin4czbZlWaWKZIpXH/ibwwgebWH/FvuVe2CFZNJPrqozCgjYbN8L0LA7pv0d+wCr3VX6FLsRiGU2+2sq7mvxB5aaLoG9Mf79t7KhajT7MEtoblGNRHwtG8EkPmKAy1RMFhWgm7IRK2phXor1kKqzICluwPHKpUUfRzKzeeecfeo5iLPtV82OoWwa6NwJDxCzwwL8Vw6zIXTOURqClge7oIDDYsQr8mHNbyebBcDLDfTKHwZ868Wj6hpfsvKXqVHKxVsxETFYzPwgNxu3Iehk0L4DQvRGd1ODhpMEJCgqC8NAf2xrmw1cxBXyWHnhtS6I77WpSJNH6MQEmiMPZuXiisNzn0V3EoPvEx/P394evri/3bQ+A0zoazeQ6uZn6Cjesl2LZRgrSEMDgaOQzWshw1h95yDveKwqDZK948xorV8omm7uus+gp38PkDYfDz84O3tzfiNwRi2MgxEUagnoVhgxTDeg6dVbNcAvY6DgMaDn2s854yDvpMv7ZRFr7CfN4gFzg78iaxWUpYsBSGwk/xbsA0TJkyGbmZoS7CYcMTYM9DWu6xQDVfnASd+ZPQnClwliVT6COBgnhaY/ydcPsS4V4+wVrmgwHVVJSeeg9Z8hmMSIoHOjfpQzxg7xyNMxn5hxhQvwWrwgf3Cwl3LhNaThGUu2ntI4HirbTJlOkW6GQC3SWEXgWhX0mwqQmDNWLYa73gqPMegRfs7J1NI4A+xxMdpQL0XGfFFbgFWk8zgWSKHSXQfIwJZBM6cgldxXwXhL5yt8hA5Wj0PwTbOxDni7Z8kasovrg7l0Y6eFKgcCvF6DMIt7KYwFVytdp1jXVSykPwGCUjGHnuKBIi8vMA3CkQ4H6Ruzi+SNNxws1dT4yIv8xq95HTco5V8KdbpOakJzpzGQlDZ44QHU9BygY/rP16miuGz7nLxtN+gaDLICe7HMNG2bQiicx8a3wXty4SUn/2RXbSeLRnCXHrgoglMpx3w3JOhIzYNyAJCUROig+LF7jBctvOEGp/JctpGXmOOgvXEkimO+QOaDsrYCdShOULArB+5VRkJ46HWu6FqvRXcTrudaxeNh1BQTMQ/8Nk9ocKWY7QldN2lmA8SijfSXFjTvJlGY1jG63NLKDlJMF8QghVuie+W+ImCwn+CMHBM9jvIMyUBCJ53UQYjohhOiaC+bjQlcPPXpNK7ard9NpT7yN2Huar95CDPxPNxwQwHBZCJxfjSrwPkmImIj56Mg7+NAEVu7yg3e/h2jNkiNB8VADehXX7yHEjiRb+641akkDRmhSyG5irjIfZqA4K0ZgmRt1uD9Ts9GR4BXXJHmjYK4Y2XcQEBCyOkaeRQ/ELrX7RD044G5elKZ3AC+kPCdC0X4j6PWLUp4jRuE8IvZzvkDlGTmAjab+e+JzK/7ny2JVbso22MHe1MVc4tQd5IYbfCFpGWs9sXZVMlrIdFFf0rJm/6Ee/YCuF5sjox7xYkuVtJlnuFlpXuo3CxljxZay/AUZFxeisSOR/AAAAAElFTkSuQmCC") no-repeat;
                width: 24px;
                height: 24px;
            }
            
            #footer {
                clear: both;
                font-size: x-small;
                font-weight: bold;
                margin-bottom: 5px;
                text-align: center;
            }
 
        </style>
    </head>
    <body>
        <h2>Тест на знание основ JavaScript</h2>
        <form name="test">
            <p><span class="name">Как Вас зовут?</span>
                <br>
                <input type="text" name="nm" size="40" maxlength="50">
            </p>
            <p><span class="ques">1) Какую функцию выполняет логический оператор "!"?</span>
                <br>
                <br>
                <input type="radio" name="s1" value="a1">Никакую, нет такого оператора
                <br>
                <input type="radio" name="s1" value="a2">Реализует конкатенацию строк
                <br>
                <input type="radio" name="s1" value="a3">Меняет логическое значение выражения на противоположное</p>
            <hr>
            <p><span class="ques">2) Какой метод объекта Math реализует возведение в степень?</span>
                <br>
                <br>
                <input type="radio" name="s2" value="a1">Math.ceil()
                <br>
                <input type="radio" name="s2" value="a2">Math.pow()
                <br>
                <input type="radio" name="s2" value="a3">Math.round()</p>
            <hr>
            <p><span class="ques">3) Между какими парами символов необходимо размещать многострочные комментарии?</span>
                <br>
                <br>
                <input type="radio" name="s3" value="a1">// комментарий //
                <br>
                <input type="radio" name="s3" value="a2">// комментарий \\
                <br>
                <input type="radio" name="s3" value="a3">Многострочные комментарии не нуждаются в обособлении
                <br>
                <input type="radio" name="s3" value="a4">/* комментарий */</p>
            <hr>
            <p><span class="ques">4) Что из перечисленного является методом объекта Window, позволяющим реализовать диалог с пользователем?</span>
                <br>
                <br>
                <input type="checkbox" name="s4" value="a1">alert()
                <br>
                <input type="checkbox" name="s4" value="a2">open()
                <br>
                <input type="checkbox" name="s4" value="a3">setTimeout()
                <br>
                <input type="checkbox" name="s4" value="a4">prompt()</p>
            <hr>
            <p><span class="ques">5) Какие события из перечисленных не связаны с движением указателя мыши?</span>
                <br>
                <br>
                <input type="checkbox" name="s5" value="a1">submit
                <br>
                <input type="checkbox" name="s5" value="a2">mousemove
                <br>
                <input type="checkbox" name="s5" value="a3">unload
                <br>
                <input type="checkbox" name="s5" value="a4">select</p>
            <hr>
            <p><span class="ques">6) Какой обработчик необходим для реакции на потерю элементом фокуса?</span>
                <br>
                <br>
                <input type="radio" name="s6" value="a1">onFocus
                <br>
                <input type="radio" name="s6" value="a2">onMove
                <br>
                <input type="radio" name="s6" value="a3">onBlur</p>
            <hr>
            <p><span class="ques">7) Какие из приведенных утверждений верны?</span>
                <br>
                <br>
                <input type="checkbox" name="s7" value="a1">JavaScript - регистрозависимый язык программирования
                <br>
                <input type="checkbox" name="s7" value="a2">JavaScript и Java похожи, у них нет существенных различий
                <br>
                <input type="checkbox" name="s7" value="a3">Использование двойных и одинарных кавычек в коде JavaScript равнозначно
                <br>
                <input type="checkbox" name="s7" value="a4">Код JavaScript выполняется на стороне сервера</p>
            <hr>
            <p><span class="ques">8) Сколько итераций пройдет цикл: <code>for (i = 5; i >= 0; i++) { i -= 2; }</code>?</span>
                <br>
                <br>
                <input type="radio" name="s8" value="a1">5
                <br>
                <input type="radio" name="s8" value="a2">Будет ошибка, запись некорректна
                <br>
                <input type="radio" name="s8" value="a3">Это вечный цикл
                <br>
                <input type="radio" name="s8" value="a4">6</p>
            <hr>
            <p><span class="ques">9) Метод getDay() объекта Date возвращает целое число от 1 до 7.</span>
                <br>
                <br>
                <input type="radio" name="s9" value="a1">Да
                <br>
                <input type="radio" name="s9" value="a2">Нет
                <br>
                <input type="radio" name="s9" value="a3">Метод возвращает не число</p>
            <hr>
            <p><span class="ques">10) Какому паттерну из приведенных ниже не соответствует подстрока "15:24"?</span>
                <br>
                <br>
                <input type="checkbox" name="s10" value="a1">/..:.[0-9]/
                <br>
                <input type="checkbox" name="s10" value="a2">/[^.]\w:[0-9][^\s]/
                <br>
                <input type="checkbox" name="s10" value="a3">/[^abc]\d.\w\S/
                <br>
                <input type="checkbox" name="s10" value="a4">/(0-9)*:(0-9)*/
                <br>
                <input type="checkbox" name="s10" value="a5">/\d*:\d*/
                <br>
                <input type="checkbox" name="s10" value="a6">/.*..*/</p>
            <hr>
            <p><span class="ques">11) Объявление переменной в теле функции без декларации var:</span>
                <br>
                <br>
                <input type="radio" name="s11" value="a1">Обязательно приведет к ошибке сценария
                <br>
                <input type="radio" name="s11" value="a2">Сделает переменную глобальной
                <br>
                <input type="radio" name="s11" value="a3">Сделает переменную недоступной для изменения</p>
            <hr>
            <p><span class="ques">12) Результатом выражения <code>[34, 9, 66, 17, 502].sort()</code> будет:</span>
                <br>
                <br>
                <input type="radio" name="s12" value="a1">9,66,502,34,17
                <br>
                <input type="radio" name="s12" value="a2">17,34,502,66,9
                <br>
                <input type="radio" name="s12" value="a3">9,17,34,66,502
                <br>
                <input type="radio" name="s12" value="a4">Такая запись неприменима, код работать не будет</p>
            <hr>
            <input type="button" value="Готово!" onClick="getMark()">
            <input type="reset" value="Очистить" onClick="hideResult()">
            <br>
        </form>
        <div id="result"></div>
        <div id="footer">All rights unreserved</div>
    </body>
</html>

zhibirc · 07.04.2013, 16:43

Обновленный вариант:

PHP/HTML
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<html>
 
<head>
    <title>TestJS</title>
    <script type="text/javascript">
        // тут либо размещаем код jQuery либо подключаем внешнюю через тег
 
    </script>
    <script type="text/javascript">
        function getMark() {
            $("#result").show("fast", function () {
                var e = document.test.nm.value,
                        t = new Array,
                        n = 0,
                        r = document.test;
                r.elements[3].checked ? n++ : t.push(1);
                r.elements[5].checked ? n++ : t.push(2);
                r.elements[10].checked ? n++ : t.push(3);
                r.elements[11].checked && r.elements[14].checked ? n++ : t.push(4);
                r.elements[15].checked && r.elements[17].checked && r.elements[18].checked ? n++ : t.push(5);
                r.elements[21].checked ? n++ : t.push(6);
                r.elements[22].checked && r.elements[24].checked ? n++ : t.push(7);
                r.elements[29].checked ? n++ : t.push(8);
                r.elements[31].checked ? n++ : t.push(9);
                r.elements[36].checked ? n++ : t.push(10);
                r.elements[40].checked ? n++ : t.push(11);
                r.elements[43].checked ? n++ : t.push(12);
                r.elements[48].checked ? n++ : t.push(13);
                r.elements[51].checked && r.elements[52].checked && r.elements[56].checked ? n++ : t.push(14);
                r.elements[59].checked ? n++ : t.push(15);
                document.getElementById("result").innerHTML = e + ', Ваш результат: <font color="#ff0000">' + n + "</font> правильных ответов из 15 возможных.";
                t.toString() != "" ? document.getElementById("result").innerHTML += ' < br > Вы неправильно ответили на вопросы : < font color = "#ff0000" > ' + t + "</font>." : document.getElementById("result").innerHTML += ' < br > Все ответы верны, но не останавливайтесь на достигнутом! < span class = "img" > < /span>'
            })
        }
 
        function hideResult() {
            $("#result").hide("fast")
        }
 
    </script>
    <style type="text/css">
        body {
            background-color: #789;
            font-family: Verdana, sans-serif
        }
 
        h2 {
            text-align: center;
            text-decoration: underline
        }
 
        .ques {
            font-weight: 700;
            font-size: 120%;
            color: #7cfc00;
            border-bottom: 2px dashed #7cfc00;
            cursor: pointer
        }
 
        .name {
            font-weight: 700;
            font-size: 120%
        }
 
        #q1,
        #q2,
        #q3,
        #q4,
        #q5,
        #q6,
        #q7,
        #q8,
        #q9,
        #q10,
        #q11,
        #q12,
        #q13,
        #q14,
        #q15 {
            display: none
        }
 
        input[type=button],
        [type=reset] {
            width: 100px;
            height: 35px;
            border-radius: 2px;
            font-weight: 700;
            margin: 5px
        }
 
        #result {
            background-color: #000;
            font-weight: 700;
            color: #789;
            border-radius: 2px;
            display: none;
            float: left;
            margin-bottom: 10px
        }
 
        #footer {
            clear: both;
            font-size: x-small;
            font-weight: 700;
            margin-bottom: 5px;
            text-align: center
        }
 
        .img {
            display: inline-block;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFE0lEQVR42sVVa0yTZxQ+vcBYArolEzTK4nRjy5YxgRTcZj9NNOJlbN4WNoMLc5PFGfdvxviDKojiREQcKtahU7xEnYo4lTuCwwqFttzpjRYoXkCBcikt0mfv1+KFodPtj2/yJP2+95znOef0ed+P6GUvZTp55MeR5MZOWlOZIt5UmSrepEimmOLtJOH3/jdx1g7yKUsSxzadmG5qz5M6u8pXoFu1Ct3qVeiq+BK3Czin4czbZlWaWKZIpXH/ibwwgebWH/ FvuVe2CFZNJPrqozCgjYbN8L0LA7pv0d+wCr3VX6FLsRiGU2+2sq7mvxB5aaLoG9Mf79t7KhajT7MEtoblGNRHwtG8EkPmKAy1RMFhWgm7IRK2phXor1kKqzICluwPHKpUUfRzKzeeecfeo5iLPtV82OoWwa6NwJDxCzwwL8Vw6zIXTOURqClge7oIDDYsQr8mHNbyebBcDLDfTKHwZ868Wj6hpfsvKXqVHKxVsxETFYzPwgNxu3Iehk0L4DQvRGd1ODhpMEJCgqC8NAf2xrmw1cxBXyWHnhtS6I77WpSJNH6MQEmiMPZuXiisNzn0V3EoPvEx/P394evri/3bQ+A0zoazeQ6uZn6Cjesl2LZRgrSEMDgaOQzWshw1h95yDveKwqDZK948xorV8omm7uus+gp38PkDYfDz84O3tzfiNwRi2MgxEUagnoVhgxTDeg6dVbNcAvY6DgMaDn2s854yDvpMv7ZRFr7CfN4gFzg78iaxWUpYsBSGwk/xbsA0TJkyGbmZoS7CYcMTYM9DWu6xQDVfnASd+ZPQnClwliVT6COBgnhaY/ydcPsS4V4+wVrmgwHVVJSeeg9Z8hmMSIoHOjfpQzxg7xyNMxn5hxhQvwWrwgf3Cwl3LhNaThGUu2ntI4HirbTJlOkW6GQC3SWEXgWhX0mwqQmDNWLYa73gqPMegRfs7J1NI4A+xxMdpQL0XGfFFbgFWk8zgWSKHSXQfIwJZBM6cgldxXwXhL5yt8hA5Wj0PwTbOxDni7Z8kasovrg7l0Y6eFKgcCvF6DMIt7KYwFVytdp1jXVSykPwGCUjGHnuKBIi8vMA3CkQ4H6Ruzi+SNNxws1dT4yIv8xq95HTco5V8KdbpOakJzpzGQlDZ44QHU9BygY/rP16miuGz7nLxtN+gaDLICe7HMNG2bQiicx8a3wXty4SUn/2RXbSeLRnCXHrgoglMpx3w3JOhIzYNyAJCUROig+LF7jBctvOEGp/ JctpGXmOOgvXEkimO+QOaDsrYCdShOULArB+5VRkJ46HWu6FqvRXcTrudaxeNh1BQTMQ/8Nk9ocKWY7QldN2lmA8SijfSXFjTvJlGY1jG63NLKDlJMF8QghVuie+W+ImCwn+CMHBM9jvIMyUBCJ53UQYjohhOiaC+bjQlcPPXpNK7ard9NpT7yN2Huar95CDPxPNxwQwHBZCJxfjSrwPkmImIj56Mg7+NAEVu7yg3e/h2jNkiNB8VADehXX7yHEjiRb+641akkDRmhSyG5irjIfZqA4K0ZgmRt1uD9Ts9GR4BXXJHmjYK4Y2XcQEBCyOkaeRQ/ELrX7RD044G5elKZ3AC+kPCdC0X4j6PWLUp4jRuE8IvZzvkDlGTmAjab+e+JzK/7ny2JVbso22MHe1MVc4tQd5IYbfCFpGWs9sXZVMlrIdFFf0rJm/6Ee/YCuF5sjox7xYkuVtJlnuFlpXuo3CxljxZay/AUZFxeisSOR/AAAAAElFTkSuQmCC) no-repeat;
            width: 24px;
            height: 24px
        }
 
    </style>
</head>
 
<body>
<h2>Тест на знание основ JavaScript</h3>
    <form name="test">
        <p><span class="name">Как Вас зовут?</span><br>
            <input type="text" name="nm" size="40" maxlength="50"></p>
        <p><span class="ques" onClick="$('#q1').fadeToggle('fast');">1) Какую функцию выполняет оператор "!"?</span><br><br>
        <div id="q1"><input type="radio" name="s1" value="a1">Никакую, нет такого оператора<br>
            <input type="radio" name="s1" value="a2">Реализует конкатенацию строк<br>
            <input type="radio" name="s1" value="a3">Меняет логическое значение выражения на противоположное
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q2').fadeToggle('fast');">2) Какой метод объекта Math реализует возведение в степень?</span><br><br>
        <div id="q2"><input type="radio" name="s2" value="a1">Math.ceil()<br>
            <input type="radio" name="s2" value="a2">Math.pow()<br>
            <input type="radio" name="s2" value="a3">Math.round()
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q3').fadeToggle('fast');">3) Между какими парами символов необходимо размещать многострочные комментарии?</span><br><br>
        <div id="q3"><input type="radio" name="s3" value="a1">// комментарий //<br>
            <input type="radio" name="s3" value="a2">// комментарий \\<br>
            <input type="radio" name="s3" value="a3">Многострочные комментарии не нуждаются в обособлении<br>
            <input type="radio" name="s3" value="a4">/* комментарий */
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q4').fadeToggle('fast');">4) Что из перечисленного является методом объекта Window, позволяющим реализовать диалог с пользователем?</span><br><br>
        <div id="q4"><input type="checkbox" name="s4" value="a1">alert()<br>
            <input type="checkbox" name="s4" value="a2">open()<br>
            <input type="checkbox" name="s4" value="a3">setTimeout()<br>
            <input type="checkbox" name="s4" value="a4">prompt()
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q5').fadeToggle('fast');">5) Какие события из перечисленных не связаны с движением указателя мыши?</span><br><br>
        <div id="q5"><input type="checkbox" name="s5" value="a1">submit<br>
            <input type="checkbox" name="s5" value="a2">mousemove<br>
            <input type="checkbox" name="s5" value="a3">unload<br>
            <input type="checkbox" name="s5" value="a4">select
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q6').fadeToggle('fast');">6) Какой обработчик необходим для реакции на потерю элементом фокуса?</span><br><br>
        <div id="q6"><input type="radio" name="s6" value="a1">onFocus<br>
            <input type="radio" name="s6" value="a2">onMove<br>
            <input type="radio" name="s6" value="a3">onBlur
        </div>
        </p>
        <hr>
        <p><span class="ques"
                 onClick="$('#q7').fadeToggle('fast');">7) Какие из приведенных утверждений верны?</span><br><br>
        <div id="q7"><input type="checkbox" name="s7" value="a1">JavaScript - регистрозависимый язык
            программирования<br>
            <input type="checkbox" name="s7" value="a2">JavaScript и Java похожи, у них нет существенных различий<br>
            <input type="checkbox" name="s7" value="a3">Использование двойных и одинарных кавычек в коде JavaScript
            равнозначно<br>
            <input type="checkbox" name="s7" value="a4">Код JavaScript выполняется на стороне сервера
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q8').fadeToggle('fast');">8) Сколько итераций пройдет цикл: <code>for (i = 5; i >= 0; i++) { i -= 2; }</code>?</span><br><br>
        <div id="q8"><input type="radio" name="s8" value="a1">5<br>
            <input type="radio" name="s8" value="a2">Будет ошибка, запись некорректна<br>
            <input type="radio" name="s8" value="a3">Это вечный цикл<br>
            <input type="radio" name="s8" value="a4">6
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q9').fadeToggle('fast');">9) Метод getDay() объекта Date возвращает целое число от 1 до 7.</span><br><br>
        <div id="q9"><input type="radio" name="s9" value="a1">Да<br>
            <input type="radio" name="s9" value="a2">Нет<br>
            <input type="radio" name="s9" value="a3">Метод возвращает не число
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q10').fadeToggle('fast');">10) Какому паттерну из приведенных ниже не соответствует подстрока "15:24"?</span><br><br>
        <div id="q10"><input type="checkbox" name="s10" value="a1">/..:.[0-9]/<br>
            <input type="checkbox" name="s10" value="a2">/[^.]\w:[0-9][^\s]/<br>
            <input type="checkbox" name="s10" value="a3">/[^abc]\d.\w\S/<br>
            <input type="checkbox" name="s10" value="a4">/(0-9)*:(0-9)*/<br>
            <input type="checkbox" name="s10" value="a5">/\d*:\d*/<br>
            <input type="checkbox" name="s10" value="a6">/.*..*/
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q11').fadeToggle('fast');">11) Объявление переменной в теле функции без декларации var:</span><br><br>
        <div id="q11"><input type="radio" name="s11" value="a1">Обязательно приведет к ошибке сценария<br>
            <input type="radio" name="s11" value="a2">Сделает переменную глобальной<br>
            <input type="radio" name="s11" value="a3">Сделает переменную недоступной для изменения
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q12').fadeToggle('fast');">12) Результатом выражения <code>[34, 9, 66, 17, 502].sort()</code> будет:</span><br><br>
        <div id="q12"><input type="radio" name="s12" value="a1">9,66,502,34,17<br>
            <input type="radio" name="s12" value="a2">17,34,502,66,9<br>
            <input type="radio" name="s12" value="a3">9,17,34,66,502<br>
            <input type="radio" name="s12" value="a4">Такая запись неприменима, код работать не будет
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q13').fadeToggle('fast');">13) Подключать внешний JS-файл к HTML-документу следует так:</span><br><br>
        <div id="q13"><input type="radio" name="s13" value="a1">&lt;script language="JavaScript" href="file.js"&gt;&lt;/script&gt;<br>
            <input type="radio" name="s13" value="a2">&lt;script language="JavaScript"
            src="file.js"&gt;&lt;/script&gt;<br>
            <input type="radio" name="s13" value="a3">&lt;script type="text/javascript" src="file.js"&gt;&lt;/script&gt;<br>
            <input type="radio" name="s13" value="a4">&lt;script language="JavaScript" type="text/javascript"&gt;&lt;/script&gt;
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q14').fadeToggle('fast');">14) Какие из приведенных ниже имен переменных недопустимы в JavaScript?</span><br><br>
        <div id="q14"><input type="checkbox" name="s14" value="a1">var $27t;<br>
            <input type="checkbox" name="s14" value="a2">var 5hhUU;<br>
            <input type="checkbox" name="s14" value="a3">var _privet:);<br>
            <input type="checkbox" name="s14" value="a4">var myName;<br>
            <input type="checkbox" name="s14" value="a5">var USSR_;<br>
            <input type="checkbox" name="s14" value="a6">var _$Q;<br>
            <input type="checkbox" name="s14" value="a7">var var;
        </div>
        </p>
        <hr>
        <p><span class="ques" onClick="$('#q15').fadeToggle('fast');">15) Какое свойство окна "отвечает" за Панель навигации браузера?</span><br><br>
        <div id="q15"><input type="radio" name="s15" value="a1">menubar<br>
            <input type="radio" name="s15" value="a2">location<br>
            <input type="radio" name="s15" value="a3">toolbar<br>
            <input type="radio" name="s15" value="a4">status
        </div>
        </p>
        <hr>
        <input type="button" value="Готово!" onClick="getMark()">&nbsp;<input type="reset" value="Очистить"
                                                                              onClick="hideResult()">&nbsp;<input
            type="button" value="^ Наверх ^" onClick="window.scrollTo(0,0);"><br>
    </form>
    <div id="result"></div>
    <div id="footer">All rights unreserved</div>
</body>
</html>

@GuardCat · 16.04.2013, 22:17

Простой прогресс-бар на javascript. Контейнер должен быть блочным элементом.

CSS
1
2
3
4
5
6
7
8
9
10
11
.progressbarContainer {
  width: 150px;
  background-color: silver;
  border: 2px outset;
}
.progressbarBody {
  background-color: #109f10;
  text-align: center;
  font-family: Arial;
  color: white;
}

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
/**
  Псевдокласс Progressbar принимает HTML-элемент, для размещения прогрессбара,
  максимально допустимое значение для него
  и стартовое значение бара. 
  Обязательным является только контейнер.
*/
function Progressbar(container, maxValue, startValue) {
  if (!container) return {}
  if (maxValue) this.maxValue = maxValue;
  if (startValue) this.startValue = startValue;
  
  this.container = container;
  this.container.className = "progressbarContainer";
 
  this.barBody = document.createElement("div");
  this.barBody.className = "progressbarBody";
  
  this.container.appendChild(this.barBody);
  
  this._value = this.startValue;
  this.setValue(this.startValue);
}
 
Progressbar.prototype = {
  // Метод. Устанавливает бару указанное значение
  setValue: function(val) {
    val = +val;
    if (isNaN(val)) return;
    this._value = val;
    this._valueToScreen();
  },
  // Метод. Прибавляет к бару указанное значение
  changeValue: function(val) {
    val = +val;
    if (isNaN(val)) return;
    this._value += val;
    this._valueToScreen();
  },
  
  _valueToScreen: function() {
    if (this._value > this.maxValue) this._value = this.maxValue;
    this.value = (this._value / this.maxValue * 100).toFixed(0);
    this.barBody.style.width = this.value + "%";
    this.barBody.innerHTML = this.barBody.style.width;
  },
  
  constructor: Progressbar,
  maxValue: 100,
  startValue: 0,
  value:0
}

Пример использования.

@newJS · 10.08.2013, 07:23

Закрыть окно при клике мимо него

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

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Закрыть окно при клике мимо него</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="win1.css">
<script type="text/javascript" src="win1.js"></script>
</head>
 
<body>
 
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text
<div style="width:2222px; text-align:center;">text</div>
<button id="but">Показать окно</button>
<div id="HM_sheet"></div>
<div id="HomeMade">
<div class="padd">Окошко с каким то текстом или картинками.<br>
Кто до чего додумается, тот это и засунет в это окошко.</div>
</div>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {background:window;}
 
/* плёнка */
#HM_sheet {background:yellowgreen; visibility:hidden; cursor:pointer;}
/*#HM_sheet {filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);}*/
#HM_sheet {position:fixed; top:0; left:0; width:100%; height:100%;}
#HM_sheet {opacity:0.1;}
/* окно */
#HomeMade {position:fixed; top:50%; left:50%; margin:-128px 0 0 -256px;}
#HomeMade {width:512px; height:256px; border:3px solid red;}
#HomeMade {border-radius:12px; visibility:hidden; background:lavender;}
#HomeMade>div {padding:12px;}
 
button {position:fixed; top:222px; left:33px;}

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
(function(){
var Q, d;
Q={};
d=document;
 
onload=function(){
init();
 
 };
 
function init(){
Q.hmS=d.getElementById("HomeMade").style;
Q.sht=d.getElementById("HM_sheet");
Q.but=d.getElementById("but");
Q.but.onclick=showWin;
Q.sht.onclick=clickNo;
Q.shtS=Q.sht.style;
 };
 
function showWin(){
Q.hmS.visibility="visible";
Q.shtS.visibility="visible";
 
 };
 
function clickNo(){//если НЕТ
Q.hmS.visibility="hidden";
Q.shtS.visibility="hidden";
return false;
 };
 
 })();

@vovandr · 22.08.2013, 23:05

Написал небольшой плагин для аддаптивного меню с возможностью менять эффекты и возможностью выбора работы либо на js либо на css https://github.com/vova84/responsive-menu

@slagemer1 · 08.01.2014, 13:05

Кубик рубик сделал ^_^ Мож надо кому) Только афтарские права указывайте!!!!!! (пена изо рта)...

качаим !

@kalabuni · 09.05.2014, 13:52

а мой кубик Рубика не нужен?
кроссбраузерно, без использования CSS3... но код, правда, типа индийского (на коленке делал)

в перспективе (если совсем уж нечего будет делать) реализую анимацию вращения по типу этой

@Опан · 03.10.2014, 11:48

Простой анализатор спектра.
Хочу предложить анализатор частотного спектра во время воспроизведения МП3, который получился в результате упрощения ёмких и запутанных в сотни строк примеров, найденных мной в интернете:

HTML5
1
2
3
4
5
6
7
<html><head>
    <title>Анализатор спектра</title>
</head>
<body><center>
<audio id="player" controls src="test.mp3"></audio> <!--Подключаем файл-->
<canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas>
</body></html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
var player   = document.getElementById('player');
var audioCtx = new AudioContext();
var source   = audioCtx.createMediaElementSource(player);
var analyser = audioCtx.createAnalyser();
    source.connect(analyser); // Подключаем анализатор к элементу audio
    analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
setInterval(function(){
    analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
    ctx.fillStyle="blue"; // Задаём цвет фона
    ctx.globalAlpha=0.05; // Это для получения эффекта плавного погасания полос
    ctx.fillRect (0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
    ctx.fillStyle="gold"; // Задаём цвет полос
    ctx.globalAlpha=1;
    for(i=0;i<1024;i++){
        ctx.fillRect(i,255-frequencyData[i],1,frequencyData[i]); // рисуем полосу
    }
},20);
</script>

Проверяем анализатор, подключая тестовый МП3-файл, который во вложении. Там записана синусоида с частотой, плавно возрастающей от крайнего нижнего до верхнего предела слышимых частот.
На основе этого можно сделать визуализацию на свой вкус.

@omninamed · 28.01.2015, 11:17

Писал для сайта игрового сообщества (клан-сайт) логотип в стиле газоразрядных неоновых вывесок как в старых американских барах (несколько неисправных символов), т.к. я не силён в рисовании флешек и гифок, реализовал всё чисто с программерским подходом. Может кому пригодится моё творчество.

neon.css

CSS
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
/* Удалить, если будете использовать на своём сайте */
body
{
  background-color: #000;
}
 
/* Шрифт для баннера */
.neon, .broken
{
    color: transparent;
    font-size: 64px;
    font-family: Swis721 BdOul BT, Gabriola;
    font-style: italic;
    text-decoration: none;
    letter-spacing: .05em;
}
 
/* Полное свечение */
.neon
{
    text-shadow:
    0 0 .02em hsla(60,100%,50%, 1),
    .04em .02em .05em hsla(80, 100%, 70%, .8),
    .03em .03em .1em #00ff00,
    .03em .03em .1em #00ff00,
    -.03em .03em .1em #00ff00,
    -.03em -.03em .1em #00ff00,
    .03em .03em .8em #00ff00,
    .03em -.03em .8em #00ff00,
    -.03em .03em .8em #00ff00,
    -.03em -.03em .8em #00ff00;
}
 
/* Сломанное свечение */
.broken
{
    text-shadow:
    0 0 .02em hsla(60,100%,50%, .6),
    .04em .02em .05em hsla(80, 100%, 70%, .3),
    .03em .03em .1em hsla(0, 100%, 0, .3),
    .03em .03em .1em hsla(0, 100%, 0, .3),
    -.03em .03em .1em hsla(0, 100%, 0, .3),
    -.03em -.03em .1em hsla(0, 100%, 0, .3);
}

neon.js

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* Элементы. Здесь замените ID на те, которые Вам нужны (неисправные буквы логотипа) */
var elemL1 = document.getElementById ( 'letter1' );
var elemL2 = document.getElementById ( 'letter2' );
var elemL3 = document.getElementById ( 'letter3' );
 
/***********************************/
/* Переменные для настройки движка */
 
/* Лимиты времени простоя */
var letterStateTimeoutMin = 3000;
var letterStateTimeoutMax = 10000;
 
/* Лимиты количества блинков */
var letterBlinksLimitMin = 5;
var letterBlinksLimitMax = 10;
 
/* Лимиты времени между блинками */
var letterBlinkTimeoutMin = 40;
var letterBlinkTimoutMax = 120;
 
/*******************************/
/* Переменные состояний движка */
 
/* Состояния элементов */
var letter1state = 0;
var letter2state = 0;
var letter3state = 0;
 
/* Счётчики блинков для каждого элемента */
var letter1counter = 0;
var letter2counter = 0;
var letter3counter = 0;
 
/* ГПСЧ с задаваемыми диапазонами */
function getRandom ( min, max )
{
    min = parseInt ( min );
    max = parseInt ( max );
    return ( Math.floor( Math.random ( ) * ( max - min + 1 ) ) + min );
};
 
/* Функция "выключает" элемент и ставит таймер включения */
function letterOff ( elem, state, counter, limit )
{
    if ( elem )
    {
        if ( state == 1 )
        {
            elem.className = 'broken';
            state = 0;
            setTimeout ( function ( ) { letterOn ( elem, state, counter, limit ); },
                getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
        };
    };
};
 
/* Функция "включает" элемент с эффектом газоразрядного стартера и ставит таймер на отключение */
function letterOn ( elem, state, counter, limit )
{
    if ( elem )
    {
        if ( state == 0 )
        {
            elem.className = 'neon';
            state = 1;
        }
        else if ( state == 1 && ( counter + 1 ) < limit )
        {
            elem.className = 'broken';
            state = 0;
        };
        timerId = setTimeout ( function ( ) { letterOn ( elem, state, counter, limit ); },
                         getRandom ( letterBlinkTimeoutMin, letterBlinkTimoutMax ) );
        if ( ++counter >= limit )
        {
            clearTimeout ( timerId );
            counter = 0;
            setTimeout ( function ( ) { letterOff ( elem, state, counter, limit ); },
                getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
        };
    };
};
 
/* Инициализация и запуск баннера */
function letterBeginShow ( )
{
    letter1state = parseInt ( getRandom ( 0, 1 ) );
    if ( letter1state == 0 )
    {
        elemL1.className = 'broken';
        setTimeout ( function ( ) { letterOn ( elemL1, letter1state, letter1counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    }
    else
    {
        elemL1.className = 'neon';
        setTimeout ( function ( ) { letterOff ( elemL1, letter1state, letter1counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    };
 
    letter2state = parseInt ( getRandom ( 0, 1 ) );
    if ( letter2state == 0 )
    {
        elemL2.className = 'broken';
        setTimeout ( function ( ) { letterOn ( elemL2, letter2state, letter2counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    }
    else
    {
        elemL2.className = 'neon';
        setTimeout ( function ( ) { letterOff ( elemL2, letter2state, letter2counter,
        getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
        getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    };
 
    letter3state = parseInt ( getRandom ( 0, 1 ) );
    if ( letter3state == 0 )
    {
        elemL3.className = 'broken';
        setTimeout ( function ( ) { letterOn ( elemL3, letter3state, letter3counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    }
    else
    {
        elemL3.className = 'neon';
        setTimeout ( function ( ) { letterOff ( elemL3, letter3state, letter3counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    };
};
 
letterBeginShow ( );

Ну и тестовая страница neon.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
<html lang="en">
    <head title="Neon">
    <link rel="stylesheet" href="neon.css">
        <body>
            <center>
                <font class="neon" id="letter1">R</font><font class="neon">ubico</font><font class="neon" id="letter2">n</font><font class="neon"> & </font><font class="neon" id="letter3">N</font><font class="neon">exus</font>
            </center>
        </body>
    </head>
</html>
<script src="neon.js"></script>

Файлы проекта прилагаются. Не забываем благодарить))

zhibirc · 31.07.2015, 19:08

Немного отсебятинки:

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
/**
 * Adding outline borders to each element on the page.
 * Sometimes is very useful. ;)
 *
 * @author Addi Osmani
 */
(function(a) {
    [].forEach.call(
        document.querySelectorAll(a),
        function(b) {
            b.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16)
        }
    )
})('*');
 
/**
 * Extend jQuery-prototype ($.fn) with method serializeToJSON().
 *
 * @author zhibirc
 */
$.fn.extend({
    serializeToJSON: function() {
        return '"{' + $(this).serialize()
            .split('&')
            .map(function(elem) {
                return elem.split('=');
            })
            .map(function(elem) {
                return elem.map(function(elem, idx, array) {
                    var __elem;
                    elem = elem.replace(/(%[\da-f]+)/ig, function(group_0) {
                        return decodeURIComponent(group_0);
                    });
                    idx && (__elem = +elem);
                    return isFinite(__elem) ? elem : '"' + elem + '"';
                });
            })
            .map(function(elem) {
                return elem.join(':')
            })
            .join(',') + '}"';
    }
});
 
/**
 * Returns an array of longest words.
 *
 * @author zhibirc
 * @todo Add the functionality to determine the level of 'longest'.
 */
function getLongestWord(str) {
    'use strict';
    var normalize = str.split(/[^-a-zа-я\d]/i),
        max_len = Math.max.apply(Math, normalize.map(function(elem) {
            return elem.length;
        }));
    return str.match(RegExp('[а-я]{' + max_len + '}', 'ig'));
}
 
/**
 * PHP function number_format in JS.
 *
 * @author zhibirc
 */
function numberFormat(value, decimal, delim, thousands_sep) {
    'use strict';
    if (typeof value !== 'number' || !isFinite(value)) {
        throw new TypeError('Parameter "value" must be a real Number!');
    }
    var resultValue = value,
        delimiter = delim || '.',
        digitParts = [],
        intPart = '';
 
    decimal && (resultValue = resultValue.toFixed(decimal));
    resultValue = parseInt(resultValue, 10) + delimiter + String(resultValue).split(/\W+/)[1];
    if (thousands_sep) {
        digitParts = resultValue.split(delimiter);
        intPart = digitParts[0].replace(new RegExp("^(\\d{1,intPart.length - 3})(?=\\d{3})", 'g'), "$1" + thousands_sep);
        resultValue = intPart + delimiter + digitParts[1];
    }
    return resultValue;
}
/** Function that fixes a case when TextNode returns instead of HTML element (in FF at least). */
function getFirstChild(elem) {
    var firstChild = elem.firstChild;
    while (firstChild && firstChild.nodeType !== 1) {
        firstChild = firstChild.nextSibling;
    }
    return firstChild;
}

@omninamed · 01.08.2015, 03:46

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

omninamed, можете на codeopen выложить? или jsbin? Что бы глянуть, на деле интересно)

Могли бы и сами сделать, 30 секунд делов то))

http://codepen.io/anon/pen/waRgGJ

@Dit81 · 07.08.2015, 14:56

Простая функция проверки на столкновения двух объектов прямоугольник-прямоугольник:

JavaScript
1
2
3
4
unction checkForCollision(obj1, obj2){
if ((obj1.x &lt; obj2.x + obj2.width) &amp;&amp; (obj2.x &lt; obj1.x + obj1.width) &amp;&amp; (obj1.y &lt; obj2.y + obj2.height) &amp;&amp; (obj2.y &lt; obj1.y + obj1.height)) return true;
return false;
}

@BANO · 07.08.2015, 15:07

Не по теме:

Dit81, а можно на js?

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

Не по теме:

Dit81, а у тебя это работает правильно?

я наверное выложу всё-таки хотя бы валидный пример

JavaScript
1
2
3
4
5
6
    function rectTest(f,s){
        return ((f.x < s.x + s.width) &&
                (s.x < f.x + f.width) &&
                (f.y < s.y + s.height) &&
                (s.y < f.y + f.height))
    }

но мне кажется, что он не рабочий

@BANO · 18.08.2015, 13:04

вот скрипт на правило 1-2-5, учитывающий -надцатые числа

вход:
- строка типа секунд_а_ы_, соответственно разделители это _, первая часть строки - неизменяеая часть слова, вторая это окончание на 1, третья на 2 и четвёртая на 5
- число, к которому мы будем "прикриплять" нашу строку

выход:
- строка со словом

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * @author BANO.notIT's Bairn
 * @param {string}w
 * @param {number}n
 * @return {string}
 */
function end125(w,n){
    w= w.split("_");
    n=(n%=100)<15&&n>9&&(6)||n%10;
    return n===1 && (w[0]+w[1])
        || n < 5 && n && (w[0]+w[2])
        || (w[0]+w[3])
}

примеры:

JavaScript
1
2
3
4
end125("секунд_а_ы_",1) // -> "секунда"
end125("секунд_а_ы_",2) // -> "секунды"
end125("секунд_а_ы_",5) // -> "секунд"
end125("секунд_а_ы_",12) // -> "секунд"

и небольшой плагин для этой функции:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
end125.ready={
    files:"файл__а_ов",
    time:{
        secs:"секунд_а_ы_",
        mins:"минут_а_ы_",
        hours:"час__а_ов",
        days:"д_ень_ня_ней",
        years:"_год_года_лет",
        weeks:"недел_я_и_ь",
        months:"месяц__а_ев"
    },
    chars:"букв_а_ы_",
    words:"слов_о_а_",
    humans:"_человек_человека_людей",
    men: "мужчин_а__",
    women: "женщин_а_ы_",
    баллы:"балл__а_ов"
}

@newJS · 19.08.2015, 06:14

BANO, тут уже давно лежит скрипт определяющий окончания слов.
Идея с передачей нужного слова понравилась, так более универсально.

@script44 · 04.09.2015, 23:08

Может кому пригодится Прогресс бар счётчик для уровней в игре на JavaScript. две штуки не много отличаются друг от друга.

первый

PHP/HTML
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<HTML>
<HEAD>
    <style>
        .pg {
            width: 204px;
            border: 2px solid #000000;
        }
 
        .pk {
            height: 10px;
            width: 0px;
            background-color: #009900;
            color: white;
        }
 
        .k {
            background: #000000;
            color: 3399 CC;
            margin-bottom: 0px;
            font-size: 10pt;
            border: solid 2px #000000;
        }
    </style>
</HEAD>
<BODY>
<script>
    var k = 10;
    var h = 10;
    var p = 10;// переменные k,h,p начальное значение которое нужно набрать
    var g = 0;
    var f = 0;
    var m = 0;
    var d = 0;
    var s = 0;
    function PX() {
        s = f - g;
        var bar = document.getElementById("bar");
        d = Math.floor(s * 100 / h).toFixed(0)
        bar.style.width = d * 2;
        "px";
        sstt.innerHTML = d + "%"
        sj.innerHTML = k - f;
    }
 
    function DS1() {
        f += 1;
        fk.innerHTML = f;
        if (f >= k)DL(), DM()
    }
    function DS5() {
        f += 5;
        fk.innerHTML = f;
        if (f >= k)DL(), DM()
    }
    function DS10() {
        f += 10;
        fk.innerHTML = f;
        if (f >= k)DL(), DM()
    }
    function DS50() {
        f += 50;
        fk.innerHTML = f;
        if (f >= k)DL(), DM()
    }
    function DS100() {
        f += 100;
        fk.innerHTML = f;
        if (f >= k)DL(), DM()
    }
    function DS500() {
        f += 500;
        fk.innerHTML = f;
        if (f >= k)DL(), DM()
    }
 
    function DSminus1() {
        if (f < 1)f += 1;
        f -= 1;
        fk.innerHTML = f;
        if (f < k - h)DLminus(), DMminus()
    }
    function DSminus10() {
        if (f < 10)f += 10;
        f -= 10;
        fk.innerHTML = f;
        if (f < k - h)DLminus(), DMminus()
    }
    function DSminus100() {
        if (f < 100)f += 100;
        f -= 100;
        fk.innerHTML = f;
        if (f < k - h)DLminus(), DMminus()
    }
 
    function DL() {
        h += 10;
        k = h + k; //здесь h и p шаг прибавления всегда должны быть равны друг другу
        p += 10;
        g = k - p;
        kf.innerHTML = k;
        if (f >= k)DL(), DM()
    }
 
    function DLminus() {
        k = k - h;
        h -= 10;   //здесь h и p шаг убавления всегда должны быть равны друг другу
        p -= 10;
        g = k - p;
        kf.innerHTML = k;
        if (f - g < 0)DLminus(), DMminus()
    }
 
    function DMminus() {
        m -= 1;
        km.innerHTML = m
    }
    function DM() {
        m += 1;
        km.innerHTML = m
    }
 
    function SB() {
        h = 10;
        p = 10;
        d = 0;
        s = 0;
        g = 0;
        f = 0;
        fk.innerHTML = f
        k = 10;
        kf.innerHTML = k
        m = 0;
        km.innerHTML = m
    }
</script>
<table>
    <tr>
        <td>
            <div class="pg">
                <div id="bar" class="pk"></div>
            </div>
        </td>
        <td><span id="sstt">0%</span></td>
    </tr>
</table>
<span id="fk">0</span>/<span id="kf">10</span><br>
<input type="button" class="k" value="+1" onclick="DS1(),PX()">
<input type="button" class="k" value="+5" onclick="DS5(),PX()">
<input type="button" class="k" value="+10" onclick="DS10(),PX()">
<input type="button" class="k" value="+50" onclick="DS50(),PX()">
<input type="button" class="k" value="+100" onclick="DS100(),PX()">
<input type="button" class="k" value="+500" onclick="DS500(),PX()">
<input type="button" class="k" value="-1" onclick="DSminus1(),PX()">
<input type="button" class="k" value="-10" onclick="DSminus10(),PX()">
<input type="button" class="k" value="-100" onclick="DSminus100(),PX()">
<input type="button" class="k" value="сброс" onclick="SB(),PX()">
<br>
уровень<span id="km">0</span><br>
до следующего уровня осталось набрать<span id="sj">10</span>
</BODY>
</HTML>

и второй

PHP/HTML
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<HTML>
<HEAD>
    <style type="text/css">
        .pgt {
            width: 204px;
            border: 2px solid #000000;
        }
 
        .pkt {
            height: 10px;
            width: 0px;
            background-color: #0066FF;
            color: white;
        }
 
        .ks {
            background: #000000;
            color: 009900;
            margin-bottom: 0px;
            font-size: 10pt;
            border: solid 2px #000000;
        }
    </style>
</HEAD>
<BODY>
 
<script>
    var c = 0;
    var y = 0;
    var n = 10;//переменная n начальное значение которое нужно набрать
    var a = 0;
    var z = 0;//z равняется начальное значение n вычесть z из шага прибавления(из функции FL)
    function PX() {
        var bars = document.getElementById("bars");
        c = Math.floor(y * 100 / n).toFixed(0);
        bars.style.width = c * 2;
        "px";
        sst.innerHTML = c + "%"
        qq.innerHTML = n - y
    }
    function RS1() {
        if (y >= n - 1)FL1(), AM();
        y += 1;
        yk.innerHTML = y;
    }
    function RS5() {
        if (y >= n - 5)FL5(), AM();
        y += 5;
        yk.innerHTML = y;
    }
    function RS10() {
        if (y >= n - 10)FL10(), AM();
        y += 10;
        yk.innerHTML = y;
    }
    function RS50() {
        if (y >= n - 50)FL50(), AM();
        y += 50;
        yk.innerHTML = y;
    }
    function RS100() {
        if (y >= n - 100)FL100(), AM();
        y += 100;
        yk.innerHTML = y;
    }
 
    function FL1() {
        n += 10;
        z += 10;
        y = y - z;
        nf.innerHTML = n;
        if (y >= n - 1)FL1(), AM()
    } //здесь n и z шаг прибавления всегда должны быть равны друг другу
    function FL5() {
        n += 10;
        z += 10;
        y = y - z;
        nf.innerHTML = n;
        if (y >= n - 5)FL5(), AM()
    }
    function FL10() {
        n += 10;
        z += 10;
        y = y - z;
        nf.innerHTML = n;
        if (y >= n - 10)FL10(), AM()
    }
    function FL50() {
        n += 10;
        z += 10;
        y = y - z;
        nf.innerHTML = n;
        if (y >= n - 50)FL50(), AM()
    }
    function FL100() {
        n += 10;
        z += 10;
        y = y - z;
        nf.innerHTML = n;
        if (y >= n - 100)FL100(), AM()
    }
 
    function RSmin1() {
        if (y + n <= 10)y += 1;
        if (y < 1)FLmin1(), AMminus();
        y -= 1;
        yk.innerHTML = y;
    }
    function RSmin10() {
        if (n <= 10)y += 10;
        if (y < 10)FLmin10(), AMminus();
        y -= 10;
        yk.innerHTML = y;
    }
    function RSmin100() {
        if (n <= 40)y += 100;
        if (y < 100)FLmin100(), AMminus();
        y -= 100;
        yk.innerHTML = y;
    }
 
    function FLmin1() {
        n -= 10;
        z -= 10;
        y = n - (-y);
        nf.innerHTML = n;
        if (y < 1)FLmin1(), AMminus();
    }  //здесь n и z шаг убавления всегда должны быть равны друг другу
    function FLmin10() {
        n -= 10;
        z -= 10;
        y = n - (-y);
        nf.innerHTML = n;
        if (y < 10)FLmin10(), AMminus();
    }
    function FLmin100() {
        n -= 10;
        z -= 10;
        y = n - (-y);
        nf.innerHTML = n;
        if (y < 100)FLmin100(), AMminus();
    }
 
    function AM() {
        a += 1;
        am.innerHTML = a
    }
    function AMminus() {
        a -= 1;
        am.innerHTML = a
    }
    function SBROS() {
        z = 0;
        c = 0;
        y = 0;
        yk.innerHTML = y
        n = 10;
        nf.innerHTML = n
        a = 0;
        am.innerHTML = a
    }
</script>
<table>
    <tr>
        <td>
            <div class="pgt">
                <div id="bars" class="pkt"></div>
            </div>
        </td>
        <td><span id="sst">0%</span></td>
    </tr>
</table>
<span id="yk">0</span>/<span id="nf">10</span><br>
<input type="button" class="ks" value="+1" onclick="RS1(),PX()">
<input type="button" class="ks" value="+5" onclick="RS5(),PX()">
<input type="button" class="ks" value="+10" onclick="RS10(),PX()">
<input type="button" class="ks" value="+50" onclick="RS50(),PX()">
<input type="button" class="ks" value="+100" onclick="RS100(),PX()">
<input type="button" class="ks" value="-1" onclick="RSmin1(),PX()">
<input type="button" class="ks" value="-10" onclick="RSmin10(),PX()">
<input type="button" class="ks" value="-100" onclick="RSmin100(),PX()">
<input type="button" class="ks" value="сброс" onclick="SBROS(),PX()"> <br>
 
уровень<span id="am">0</span><br>
до следующего уровня осталось набрать<span id="qq">10</span>
</BODY>
</HTML>

@script44 · 21.09.2015, 00:07

Вкладки(табы) на чистом Javascript без jQuery
Вкладки.7z

@Опан · 30.10.2015, 01:57

Осциллограф

Хочу предложить простой онлайн-осциллограф. Измерительным входом является вход звуковой карты. (Микрофонный или линейный.) Можно так же подключать звук любого программного плеера на компьютере, (типа винамп и др.) установив птичку в микшере записи звуковой карты в секции "стереомикс". Так же исключения не составят звуки с интернета.
Единственная заковывка получилась в том, что не получается развязка по правому и левому стереоканалам, т. е., с обоих стереовходов информация почему-то попадает в один и тот же буфер. Поэтому у осциллографа пока только один моно-луч, а не два:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Осциллограф</title>
</head>
<body><center><h1>Осциллограф</h1>
<canvas id=canvas width=512 height=256 style="border-style:solid;border-width:5px;border-color:green;border-radius:15px"></canvas>
<br><br>Частота развёртки: <input id=speed type=range max=12 value=8 style="width:250px;cursor:pointer" onchange="rangechange(this.value)">
<span id=myspeed>rty</span>
</body></html>

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
<script>
function rangechange(e){ // Что происходит при переключении движка
    st=0;
    k=speed.max-e;
    k1=k-4;
    if(k1<0){k1=0};
    k5=Math.pow(2,k1);
    if(k>4){myspeed.innerHTML=" / "+k5}else{myspeed.innerHTML=" X "+Math.pow(2,(4-k))};
    imgData=ctx.createImageData(cw,ch); 
    mycls(); // Чистим весь экран
    ctx.putImageData(imgData,0,0);
    imgData=ctx.createImageData(Math.floor(cw/k5),ch);  
}
 
function mycls(){ // Очистка прямоугольной области
    for (var i=0;i<imgData.data.length;i+=4){
        imgData.data[i+0]=0;   // R фона
        imgData.data[i+1]=0;   // G фона
        imgData.data[i+2]=0;   // B фона
        imgData.data[i+3]=255; // A фона
    }
}
 
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var db=4096; // длина буфера чтения со входа звуковой карты
rangechange(8);
try{window.AudioContext = window.AudioContext || window.webkitAudioContext;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    audio_context = new AudioContext;
}catch(e){alert('Этот браузер не поддерживает веб аудио!');
}
navigator.getUserMedia({audio: true}, function(stream){
    var source = audio_context.createMediaStreamSource(stream);
    var numChannels = 2; // типа стерео
    source.node = (source.context.createScriptProcessor ||
        source.context.createJavaScriptNode).call(source.context,
        db, numChannels, numChannels);
        false;
    source.node.onaudioprocess = function(e){
        var buffer = [];
        for (var channel = 0; channel < numChannels; channel++){
            buffer.push(e.inputBuffer.getChannelData(channel));
        } 
        mycls();
        ctx.putImageData(imgData,cw/k5*st,0);
        for(i=0;i<db;i++){
            var i1=i;
            if(k<4){i1=i*Math.pow(2,(4-k))};
            var y=Math.floor(ch/2)+Math.floor(buffer[1][i]*ch/2);
            var x=Math.floor((i1)*cw/db/k5);
            var px=Math.floor(y*cw/k5+x)*4;
            imgData.data[px]=64;    // R луча
            imgData.data[px+1]=255; // G луча
            imgData.data[px+2]=220; // B луча
            imgData.data[px+3]=255; // A луча
        }
        ctx.putImageData(imgData,cw/k5*st,0); // рисуем осциллограмму
        st++;
        if(st>=k5){st=0};
    }
    source.connect(source.node);
    source.node.connect(source.context.destination);
}, function(e){
});
</script>

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@EPMAK tribal dance 168 / 156 / 36 Регистрация: 03.09.2009 Сообщений: 820 Записей в блоге: 17
	06.03.2013, 18:30
	col-resize, row-resize. В первый раз вижу. Добавлено через 8 минут кур-ы для мозиллы. может пригодится. https://developer.mozilla.org/... CSS/cursor 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.08.2013, 23:05
	Написал небольшой плагин для аддаптивного меню с возможностью менять эффекты и возможностью выбора работы либо на js либо на css https://github.com/vova84/responsive-menu 0

@slagemer1 45 / 27 / 16 Регистрация: 01.01.2014 Сообщений: 163
	08.01.2014, 13:05
	Кубик рубик сделал ^_^ Мож надо кому) Только афтарские права указывайте!!!!!! (пена изо рта)... качаим ! 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	09.05.2014, 13:52
	а мой кубик Рубика не нужен? кроссбраузерно, без использования CSS3... но код, правда, типа индийского (на коленке делал) в перспективе (если совсем уж нечего будет делать) реализую анимацию вращения по типу этой 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	19.08.2015, 06:14
	BANO, тут уже давно лежит скрипт определяющий окончания слов. Идея с передачей нужного слова понравилась, так более универсально. 0

@script44 4 / 4 / 2 Регистрация: 22.04.2015 Сообщений: 13
	21.09.2015, 00:07
	Вкладки(табы) на чистом Javascript без jQuery Вкладки.7z 1