Report
-
Similar Content
-
By Vasilyyy
Доброго времени суток. Я начинающий в изучении JavaScript. Во время моих уроков я столкнулся с проблемой, которую не могу решить уже 4 дня. Она состоит в том, что при первом клике значок переворачивается на 180 градусов направо, а по следующему клику он должен крутиться в реверсе. В чем я допустил ошибку? Вот код, который я использовал в письменном виде:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="animStart" onclick="itemSpin();itemSpinRev();"><span id="burger">☰</span></button> <script type="text/javascript"> function itemSpin(normal) { animStart.classList.add('anim'); var start = getMilliseconds(ms); var spinner = getMilliseconds(ms) - start; if(spinner >= 400) { animStart.classList.remove('anim'); // animStart.classList.add('animate'); // // animStart.classList.toggle('animate'); } }; function itemSpinRev(reverse) { animStart.classList.add('animate'); var start = getMilliseconds(); var reverse = getMilliseconds() - start; if(reverse >= 400) { animStart.classList.remove('animate'); } }; </script> </body> </html> body { background: #4f5a6e; margin: 0; padding: 0; } #animStart { position: absolute; background-color: #4f5a6e; margin-left: 10px; margin-top: 10px; border: none; font-size: 20px; cursor: pointer; outline: none; } #animStart.anim { animation-name: spin; animation-duration: 0.4s; animation-timing-function: linear; } #animStart.animate { animation-name: spin; animation-duration: 0.4s; animation-timing-function: linear; animation-direction: reverse; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
-
By Алексей2802
Здравствуйте, уважаемые!!
Начну с того, что перерыл весь интернет по данному вопросу. Нашел только про картинки (img) с определенными id, что мне не подходит.
А вопрос такой:
При нажатии на div с классом "small", который находится в ячейке таблицы, надо его увеличить на пол экрана, создав затемнение тела сайта. При этом ячейки не должны изменять размеры. При повторном нажатии, либо нажатии вне этого дива, вернуть его в исходное положение.при этом ячейки не должны изменять размеры.
https://jsfiddle.net/x7106joc/3/
Заранее благодарен.
-
By kattiperk
Здравствуйте.
Случилась проблема - плохо открывается модальное окно
http://top-matras.ru/- при нажатии на " Заказать обратный звонок"
Было всё неплохо, потом кто-то там хозяйничал, всё сломал. А я устала куда смотреть, не могу найти!
Спасибо.
-
By GrizzzlyGames
Вот код, почему не срабатывает onclick?
<!doctype html> <html> <meta charset='utf-8'> <head> <title>imgExample</title> <script src ='file:///E:/www/draw.js'></script> </head> <body> <canvas id='example' width = "640" height="480"></canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'), // Контекст picfon = new Image(); // "Создаём" изображение picfon.src = 'file:///E:/www/background/background.png'; // Источник изображения button1 = new Image(); button2 = new Image(); button3 = new Image(); button1.src = 'file:///E:/www/button/button1.png';//Кнопка ВОТ!... button2.src = 'file:///E:/www/button/button2.png';//Кнопка ЕЩЕ! button3.src = 'file:///E:/www/button/button3.png';//Кнопка Рассказать другу. picfon.onload = function() { // Событие onLoad ctx.drawImage(picfon, 0, 0); // Рисуем изображение ctx.drawImage(button1, 190, 360);//Отрисовка кнопки вот! } button1.onclick = function ajaj() { ctx.drawImage(button2, 100, 100); } </script> </body></html> -
By GrizzzlyGames
Нарисовал кнопку в фотошопе, добавил в canvas, теперь незнаю как добавить на картинку событие onclick, через тэг <img> неподойдет...
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-