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

@newJS · 28.02.2013, 20:31

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

PHP/HTML

<!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

<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

<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

.progressbarContainer {
  width: 150px;
  background-color: silver;
  border: 2px outset;
}
.progressbarBody {
  background-color: #109f10;
  text-align: center;
  font-family: Arial;
  color: white;
}

Javascript

/**
  Псевдокласс 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

<!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

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

(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

<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

<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

/* Удалить, если будете использовать на своём сайте */
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

/* Элементы. Здесь замените 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

<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

/**
 * 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

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

    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

/**
 * @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

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

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

Javascript

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

<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

<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

<!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

<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>

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

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

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

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

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

@omninamed 10 / 10 / 4 Регистрация: 18.06.2013 Сообщений: 29
	01.08.2015, 03:46	33
	Сообщение от Thisman omninamed, можете на codeopen выложить? или jsbin? Что бы глянуть, на деле интересно) Могли бы и сами сделать, 30 секунд делов то)) http://codepen.io/anon/pen/waRgGJ 1

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