Светофор МЕТОДЫ, АТРИБУТЫ и СОБЫТИЯ preventDefault() метод, отменяет это событие, если оно отменяемое, а это означает, что действие по умолчанию, которое принадлежит к событию, не произойдет. Например, это может быть полезно, когда: При нажатии на кнопку «Отправить», не допустить его отправки формы При нажатии на ссылку, предотвратить ссылку от следования URL dataTransfer.setData () Метод, задает… Читать далее »
Пример №1 Скрипт меняющий строчные буквы на заглавные СОБЫТИЯ и МЕТОДЫ OnKeyUp Событие, происходит, когда пользователь отпускает клавишу (на клавиатуре). toUpperCase () Метод, преобразует строку заглавными буквами. КОД <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> </head> <body> <p>Функция запускается, когда пользователь отпускает клавишу в поле ввода, меняет буквы срочные на заглавные </p> Введите текст: <input type=»text»… Читать далее »
Задание Создать раскрывающееся меню при клике Сделайте так, чтобы при прокрутке ниже элемента #avatar (картинка с Винни-Пухом) – он продолжал показываться в левом-верхнем углу. При прокрутке вверх – должен возвращаться на обычное место. Решение 1. <!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <style> .menu ul { margin: 0; list-style: none; padding-left: 20px; display: none; } .menu .title… Читать далее »
Лампочка СОБЫТИЯ OnClick событие, выполнение JavaScript при щелчке по кнопке КОД <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> </head> <body> <h1>ЛАМПОЧКА</h1> <button onclick=»document.getElementById(‘myImage’).src=’pic_bulbon.gif'»>включить</button> <img id=»myImage» src=»pic_bulboff.gif» style=»width:100px»> <button onclick=»document.getElementById(‘myImage’).src=’pic_bulboff.gif'»>выключить</button> </body> </html> КАРТИНКИ ДЛЯ ПРОГРАММЫ Кнопка вверх для сайта Можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. Отличие в том, что… Читать далее »
<head> <meta charset=’utf-8′> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script> <style> .red{ background:red; } .green{ background:green; } *{border:1px solid black;} .blue{ background:blue; } .main { color:white; float:left; padding:20px; } </style> </head> <body> <div class=’red main’>div Red</div> <div class=’green main’>div Green</div> <div class=’blue main’>div Blue</div> <p class=’red main’>pRed</p> <p class=’green main’>pGreen</p> <p class=’blue main’>pBlue</p> <!— $(«*») — Выбрать все элементы —>… Читать далее »
Подключаем библиотеку Jquery <head> <meta charset=’utf-8′> <script src= «https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js» ></script> </head> <body> <div id=’d1′> <div id=’mydiv’ style=’height:200px;border:1px solid black;’>Привет мир</div> <button id=’b1′>Спрятать надпись «Привет мир»</button> <button id=’b2′>Показать надпись «Привет мир»</button> <button id=’b3′>Переключить «Привет мир»</button> </div> <div id=’d2′ style=’width:100px;height:100px;background:red;’> </div> <script> //$(«.myclass»); //$(«div»); $(document).ready(function(){ $(«#d2»).hide(); $(«#b1»).click(function(){ $(«#mydiv»).slideUp(1000); }); $(«#b2»).click(function(){ $(«#mydiv»).slideDown(1000); }); $(«#b3»).click(function(){ $(«#d1»).toggle(1000); $(«#d2»).toggle(1000); }); $(«#d2»).click(function(){… Читать далее »
<script> function myFunction(id) { dd=document.getElementById(id); dd.style.border=»1px solid green»; } function blurFunction(id) { dd=document.getElementById(id); dd.style.border=»1px solid red»; } function mykeyup() { inp3=document.getElementById(‘test2’); dd=document.getElementById(‘dd’); len=20-inp3.value.length; dd.innerHTML=»Осталось ввести «+len+» символов»; } </script> <input onfocus=»myFunction(‘test’)» onblur=»blurFunction(‘test’)» id=’test’> <input onfocus=»myFunction(‘test1’)» onblur=»blurFunction(‘test1′)» id=’test1′> <input id=’test2′ onkeyup=’mykeyup()’> <div id=’dd’>Вам нужно ввести 20 символов.</div> Урок-4. Шаблон для подсказок
СОБЫТИЯ и МЕТОДЫ onmousemove — Событие onmousemove используется для определения перемещения курсора мыши в любом направлении экрана. Это событие применяется для создания различных эффектов, связанных с курсором мыши. Math.round () Метод, округляет число до ближайшего целого числа. Свойство clientX возвращает горизонтальную координату (в зависимости от клиентской области) указателя мыши, когда событие мыши сработает. Свойство clientY… Читать далее »
<style> .slider { position:absolute; top:0; left:0; width:100%; } </style> <img src=’1.jpg’ class=’slider’ id=’img1′ onclick=»hide(‘img1′,’img2′,1)»> <img src=’2.jpg’ class=’slider’ id=’img2′ onclick=»hide(‘img2′,’img3′,1)»> <img src=’3.jpg’ class=’slider’ id=’img3′ onclick=»hide(‘img3′,’img4′,1)»> <img src=’4.jpg’ class=’slider’ id=’img4′ onclick=»hide(‘img4′,’img5′,1)»> <img src=’5.jpg’ class=’slider’ id=’img5′ onclick=»hide(‘img5′,’img1’,1)»> <script> function hide(name,name1,opacity)// скрываем картинку name и показываем name1 { myimg=document.getElementById(name);// получаем объект картики по id name myimg1=document.getElementById(name1);// получаем объект картики… Читать далее »
Назначение обработчика onclick. Для того, чтобы скрипт реагировал на событие — нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют «on+имя события», например: onclick. Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже. Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие. Например, для обработки события click на кнопке input, можно… Читать далее »