Меню

Кнопка сделать кнопку счетчик



Повесить счётчик на кнопку

всем привет. есть кнопка которая описывается как

и надо на нее повесить счётчик чтоб значение количества нажатий выводил в консоль.

на просторах интернета нашел пример:

описание кнопки заданно как :

а сам скрипт задан кодом:

не могу переделать под свои нужды. попробовал вот так вот и выполнить в консоли браузера, но ничего не получается.
пробовал выполнить в расширении Tampermonkey (желательно что работало в Tampermonkey), но все равно не работает.

прикладываю скрипт который сам передела и прошу указать на ошибки и направить по правильному пути .

Button.onclick — как повесить на кнопку последовательные события?
Привет, есть вот такой код. Тут 5 блоков (стили в отдельном css файле). Задача, поменять цвет.

JavaScript+JQuery! Как повесить функцию обновления страницы на эту же нажатую кнопку, которая имеет другую функцию?
я понимаю что звучит очень странно, НО! по пунктам: 1. есть кнопка С функцией А 2. при нажатии на.

Поставить счетчик, сколько раз нажали на эту кнопку
Я начинающий программист на javascript опыта почти не имею. Создал сайт на html и хочу поставить .

вставил и в расширение и в консоль хрома, в консоли хрома выдал ошибку.

Решение

оооо да, работает с первого раза )спасибо )

а еще такой вопрос тогда, если не сложно ?)

есть массив радиобоксов :

надо узнать какой из них выбран. нашел код на просторах интерента. и надо в отдельнотси считать каждый радиобокс при нажатии на кнопку ( счёт по которой идет. )
нашел код выглядит так:

Вложения

twist.rar (125.2 Кб, 0 просмотров)

var rad=document.getElementsByName(‘r1’); — в этой строке ошибка

У твоего input в атрибуте name стоит status

А в JS ты пишешь r1.

То есть в итоге у тебя должна получиться строчка

спасибо за помощь ) В итоге получился такой код который работает как надо и как хотелось )

теперь встала другая задача, при закрытии браузера или страницы, ее перезагрузки или еще каких то факапав счётчик обнуляется. нужно чтоб он не обнулялся, а проверялся. то есть сделал 50 нажатий, закрыт браузер. через 5 мин открыл начал нажимать, а он тебе дальше считает, а не по новой. подскажите про какие функции почитать, чтоб реализовать данную задумку.

думал делать через куки. но может кто то знает более приятное решение. спасибо

Добавлено через 19 минут
или использовать методы window.sessionStorage и window.localStorage ?

итак. есть продвижения по моему скрипту

в итоге получается такой код:

в нем присутствует функция inspection. хочу делать проверку хранящихся в файле данных. мне с нее надо вернуть 3 значения: return [counter, performed, expectation];, правильно ли я понимаю, что будет возвращен массив с 3 элементами и с ними надо работать как с массивом. то есть, если я захочу сохранить их в другую переменную то надо составлять конструкцию на подобии let a = inspection [0] где будет храниться значение counter и так для 3 значений. ?

спасибо за помощь и наставления. )

и вообще как код выглядит? вроде постарался делать красиво и расписывать каждую функцию, все что можно было вынести в отдельную функцию вынес.

Источник

Кнопки счетчиков посетителей в одну строку

В данной статье я покажу Вам, как можно выставить кнопки рейтинга (статистики) сайта в одну строку при помощи нескольких тегов HTML. Данная штука применима к любым сайтам и любому контенту: тексту, картинкам, видео и прочему. При необходимости, Вы можете использовать данный код в статьях и записях. На примере моего сайта Вы увидите, как можно выставить в «подвале» сайта в одну строку текст, счетчик Mail.ru и счетчик посещений от LiveInternet.

К написанию данной статьи меня подтолкнул один из читателей блога, который задал свой вопрос, когда я тестировал Онлайн консультанта для сайта.
[infob]Прежде всего, перед тем, как приступить к практической части, не забывайте делать резервную копию файлов с которыми будете работать.[/infob]

Внимание! Новый апдейт полностью заточенной под SEO + PageSpeed темы для сайта WP Romb — максимально быстро и максимально удобно. Настрой под себя уникальный дизайн за пару минут и собирай тысячи трафика. Всё на русском + обновления + техподдержка.

Для тех, кто еще не понял о чем пойдет речь, я сделал скриншот (клик для увеличения):

Данная конструкция находится в самом низу сайта mojwp.ru. Здесь мы видим слева текст, а справа 2 счетчика (Mail.ru и LiveInternet). Все находится на одном уровне и не занимает много места. К тому же это более красиво, чем несколько кнопок друг под другом с большими промежутками между ними.

Чтобы быстро сделать сайт , либо реализовать подобное, потребуются некоторые знания html, а также мои подсказки. Для наглядности покажу 2 способа, как реализовать подобное (в результате будет как на данном сайте).

Способ №1: используем div.

Именно таким способом реализовано у меня. Если у Вас есть хоть начальные знания по применению контейнеров div, то больших сложностей данная процедура не вызовет. Вот мой код:

Все это записано в одну строку в файле footer.php (так называемый «подвал» сайта).

  • float:left — выравнивание по левому краю.
  • padding: 0 0 5px 5px — внутренний отступ: сверху справа снизу слева
  • float:right — выравнивание по правому краю

Если у Вас количество кнопок больше, то достаточно добавить необходимое количество контейнеров div. Так же можете поэкспериментировать с отступами, т.е. значениями. Вместо нулей достаточно записать количество пикселей и добавить их обозначение px.

Способ №2: при помощи HTML

Если Вы собираетесь развиваться в области «блоггинга», то просто необходимо знать азы HTML. Для этого погуглите и почитайте соответствующую литературу. Могу Вас уверить, что все успешные блоггеры начинали именно так. Я так же периодически заглядываю в справочник http://htmlbook.ru/html/ , когда необходимо освежить память.

Читайте также:  Подключение электросчетчика для садов

Чтобы сделать аналогичное тому, как было показано в первом способе, но уже на HTML, нам потребуется следующая конструкция (таблица), которую так же помещаем в нужно место:

Теперь все будет выстроено в одну строку. Однако при таком коде, ячейки будет идти друг за другом, т.е. без отступов. Чтобы привести все в немного красивый вид, необходимо добавить следующее:

В данном коде был добавлен параметр ширины (width) как для всей таблицы, так и для двух ячеек, куда помещены мои счетчики.

  • tablе width=100% обозначает, что таблица займет всю ширину области (в данном случае «подвала»). Если Вам нужно разместить лишь на какой-то части области, то выставляем необходимый процент.
  • td width=88px обозначает, что данная ячейка будет шириной 88px. Почему именно эта цифра? Если посмотреть ширину картинки, то она будет именно такой. Т.е. указывая цифру 88 мы ограничиваем ячейку, что в купе с шириной таблицы 100% и оставшимися ячейками, прижмет необходимую мне к правому краю.

Как Вы заметили, ширину (width), можно указывать в % и в пикселях (px). Вы сами выбираете, как будет лучше смотреться.

Применять данные способы можно не только для описанного случая, но для других целей. Просто помните о нем и Вы всегда найдете то, что нужно выставить в одну строку (банеры, блоки текстов, видеоролики, контекстные ссылки и прочее).

К примеру: Ваш сайт принимают в Rotaban — биржа баннерной рекламы. Чтобы разместить 2 банера 468*60 пикселей в один ряд в шапке сайта (или над ней), Вам просто необходимы будут подобные знания, изложенные в статье. А размещая два блока рекламы — Вы увеличиваете свою прибыль и не сильно «напрягаете» посетителя сайта слишком длинным рекламным блоком.

Вот и все. Будут вопросы — пишите в комментариях, либо в тикеты. Но, прежде чем писать, попробуйте найти ответ на свой вопрос в справочнике, ссылка на который дана чуть выше.

Источник

Собственная HTML+JavaScript кнопка «Поделиться» во вконтакте для сайта со счетчиком. 2 способа получения количества репостов, используя VK API

А сегодня сентябрьский премиум-пост. Идея поста возникла у меня в результате переезда со стандартных социальных кнопок «Поделиться» на собственные кастомные. Основная причина конечно — это производительность сайта, у меня даже есть старый-престарый пост, в котором я описываю, почему не стоит использовать стандартные кнопки соц. сетей, и этот пост до сих пор актуален!

Пример кнопки — сразу под постом, перед формой подписки. Вы можете сами убедиться в рабочести моей кнопки, только обратите внимание — для ускорения загрузки страниц мой сайт кэширует счетчик кнопки на 2 часа. То есть после того, как вы поделились постом во вконтакте, вам нужно подождать до 2 часов (максимум), чтобы счетчик изменил своё значение.

Шаг 1. Создание HTML кнопки.

Даже jQuery нам не понадобится, просто вставляете код в то место, в котором хотите отобразить кнопку. Как вы видите, по сути тут чистый HTML и чуть-чуть JavaScript, причем если его удалить, то это будет просто кнопка-ссылка, но в то же время счетчик будет работать как полагается (WordPress или чистый PHP обязателен).

  • Строчка 2 — в этой переменной укажите URL, на котором находится кнопка «Поделиться», если у вас WordPress, то можете использовать функцию get_permalink().
  • 3 — заголовок или название страницы, опять-таки для WordPress его можно получить функцией get_the_title().
  • 4 — короткое описание.
  • 5 — URL изображения-миниатюры, которое должно будет отобразиться во вконтакте. В коде же я показал пример для WP, основываясь на его функционале миниатюр — сначала я получил ID миниатюры функцией get_post_thumbnail_id(), а затем, уже при помощи wp_get_attachment_image_src(), на основе этого ID, получил URL картинки.
  • 8 — да, именно на этой строчке мы и получаем количество репостов из API, в примере используется функция из второго способа (для WordPress), но вы разумеется можете воспользоваться первым из рассмотренных ниже методов.

Шаг 2. Получение количества репостов через API вконтакте

Сейчас я покажу два простейших способа получения количества репоста той или иной страницы. Вы спокойно можете использовать тот способ, который вам нравится (обратите внимание — второй способ подойдёт только для WP) и вам совсем не обязательно разбираться в том, как работает код внутри функций — просто вставляете их к себе на сайт и используете.

Способ 1. Через cURL

Этот способ хорош тем, что его вы можете использовать на своём сайте вне зависимости от того, какая CMS у вас стоит — это может быть WordPress, а может быть и вообще какой-нибудь самописный движок.

Разбор по строчкам.

  • 1 — при использовании метода получения количества репостов через cURL вам достаточно указать лишь URL страницы, на котором находится кнопка.
  • 3 — возможно тут у вас возникнет вопрос, что такое index=1 , у меня этот вопрос тоже возник и я задал его агенту поддержки вконтакте. И вот ответ:

Одним словом мне просто мягко сказали, что это не моё дело. Ну и ладно.

  • 14 — возможно это не самый оптимальный способ извлечения количества репостов из полученного результата, если у вас есть идеи, как это можно сделать лучшим образом, буду рад, если поделитесь в комментариях.
  • Способ 2. Через WordPress HTTP API

    Ну думаю тут ясно, что этот способ только для WordPress. А это значит, что код с большой долей вероятности отправится в functions.php вашей текущей темы.

    • 2-5 и 11 — так как я не хочу, чтобы подключение к VK API лишний раз нагружало страницы моего сайта, то я кэширую число репостов на час.

    Ну вот и всё. Я специально не стал давать CSS стили, чтобы вы сами могли оформить кнопку, как пожелаете. Также я не запрещаю использовать дизайн кнопки как у меня на сайте.

    Ещё немного про VK

    Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

    Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

    Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

    Источник

    Интерактивные элементы в Excel с использованием Счетчика и Полосы прокрутки

    Helen Bradley объясняет, как добавлять интерактивные элементы на лист Excel, используя Полосу прокрутки и Счетчик.

    Всякий раз, когда пользователь выбирает из дискретного набора вариантов, какие данные ввести на лист Excel, Вы можете сэкономить время, автоматизировав процесс ввода. Это можно сделать различными способами, и один из них – использовать интерактивные элементы Spin Button (Счетчик) или Scroll Bar (Полоса прокрутки). Сегодня я познакомлю Вас с использованием Счетчика и Полосы прокрутки, а также покажу, как добавить к графику в Excel интерактивный элемент Счетчик.

    Открываем вкладку Разработчик

    В Excel 2007 и Excel 2010 элементы Счетчик и Полоса прокрутки доступны на вкладке Developer (Разработчик). Если у Вас эта вкладка не отображается выполните следующее:

    • в Excel 2010 откройте File >Options >Customize Ribbon (Файл > Параметры > Настроить ленту) и на панели справа поставьте галочку возле названия вкладки Developer (Разработчик).
    • в Excel 2007 нажмите кнопку Office, выберите Excel Options (Параметры Excel) и далее в разделе Popular (Основные) включите опцию Show Developer tab in the Ribbon (Показывать вкладку Разработчик на Ленте).

    Чтобы увидеть инструменты, перейдите на вкладку Developer > Insert (Разработчик > Вставить) и выберите элемент Spin Button (Счетчик) или Scroll Bar (Полоса прокрутки) из группы Form Controls (Элементы управления формы). Крайне важно выбирать именно из этой группы, а не из ActiveX Controls (Элементы ActiveX), так как они работают абсолютно по-разному.

    Перетащите на рабочий лист Excel Счетчик и Полосу прокрутки. Заметьте, что Вы можете изменять положение этих элементов, а также поворачивать их вертикально или горизонтально. Чтобы передвинуть или изменить размер элемента управления, щелкните по нему правой кнопкой мыши, а затем изменяйте размер или перетаскивайте.

    Чтобы увидеть, как все это работает, щелкните правой кнопкой мыши по объекту и выберите пункт Format Control (Формат объекта). В открывшемся диалоговом окне на вкладке Control (Элемент управления) находятся параметры для настройки Счетчика. По своей сути, Счетчик помещает в ячейку какое-то значение, а Вы, нажимая стрелки, увеличиваете или уменьшаете его.

    Элемент Счетчик имеет ограничения: значение должно быть целым числом от 0 до 30000, параметр Incremental Change (Шаг изменения) также должен быть любым целым числом от 1 до 30000.

    Установите Current Value (Текущее значение) равным 50, Minimum Value (Минимальное значение) равным , Maximum Value (Максимальное значение) равное 300 и Incremental Change (Шаг изменения) равным 10. Кликните по полю Cell Link (Связь с ячейкой), затем выделите ячейку A1 и закройте диалоговое окно.

    Щелкните в стороне от Счетчика, чтобы снять с него выделение, и понажимайте стрелки. Вы увидите, что с каждым нажатием значение в ячейке A1 изменяется. Вы можете увеличить значение до 300, но не более, и уменьшить до 0, но не менее. Обратите внимание, что значение изменяется с шагом 10.

    Делаем Счетчик более полезным

    Вы можете использовать Счетчик таким образом, чтобы пользователь мог вводить значения на листе простым нажатием кнопки, вместо ввода вручную с клавиатуры. Вероятно, у Вас возникает вопрос: как быть, если значения, которые должен ввести пользователь не целые числа в диапазоне от 0 до 30000?

    Решение есть – используйте промежуточную ячейку для вычисления нужного Вам значения. Например, если Вы хотите, чтобы пользователь вводил значения между 0% и 5% с шагом 0,1%, нужно масштабировать значение, которое дает счетчик, чтобы получить результат от до 0,05 с шагом 0,001.

    Есть множество вариантов, как это можно реализовать математически и, если Ваше решение работает, то не имеет значения, как Вы это сделали. Вот одно из возможных решений: кликните по счетчику правой кнопкой мыши, выберите Format Control (Формат объекта) и установите Minimum Value (Минимальное значение) = 0, Maximum Value (Максимальное значение) = 500 и Incremental Change (Шаг изменения) = 10. Установите связь с ячейкой A1. Далее в ячейке A2 запишите формулу =A1/10000 и примените к ней процентный числовой формат с одним десятичным знаком.

    Теперь, нажимая на кнопки счетчика, Вы получите в ячейке A2 именно тот результат, который необходим – значение процента между 0% и 5% с шагом 0,1%. Значение в ячейке A1 создано счетчиком, но нас больше интересует значение в ячейке A2.

    Всегда, когда нужно получить значение более сложное, чем целое число, используйте подобное решение: масштабируйте результат, полученный от счетчика, и превращайте его в нужное значение.

    Как работает Полоса прокрутки

    Полоса прокрутки работает таким же образом, как и Счетчик. Кроме этого, для Полосы прокрутки Вы можете настроить параметр Page Change (Шаг изменения по страницам), который определяет на сколько изменяется значение, когда Вы кликаете по полосе прокрутки в стороне от её ползунка. Параметр Incremental Change (Шаг изменения) используется при нажатии стрелок по краям Полосы прокрутки. Конечно же нужно настроить связь полосы прокрутки с ячейкой, в которую должен быть помещен результат. Если нужно масштабировать значение, Вам потребуется дополнительная ячейка с формулой, которая будет изменять значение, полученное от Полосы прокрутки, чтобы получить правильный конечный результат.

    Представьте организацию, которая предоставляет кредиты от $20 000 до $5 000 000 с шагом изменения суммы $10 000. Вы можете использовать Полосу прокрутки для ввода суммы займа. В этом примере я установил связь с ячейкой E2, а в C2 ввел формулу =E2*10000 – эта ячейка показывает желаемую сумму займа.

    Полоса прокрутки будет иметь параметры: Minimum Value (Минимальное значение) = 2, Maximum Value (Максимальное значение) = 500, Incremental Change (Шаг изменения) = 1 и Page Change (Шаг изменения по страницам) = 10. Incremental Change (Шаг изменения) должен быть равен 1, чтобы дать возможность пользователю точно настроить значение кратное $10 000. Если Вы хотите создать удобное решение, то очень важно, чтобы пользователь имел возможность легко получить нужный ему результат. Если Вы установите Шаг изменения равным, к примеру, 5, пользователь сможет изменять сумму займа кратно $50 000, а это слишком большое число.

    Параметр Page Change (Шаг изменения по страницам) позволяет пользователю изменять сумму займа с шагом $100 000, так он сможет быстрее приблизиться к сумме, которая его интересует. Ползунок полосы прокрутки не настраивается ни какими параметрами, так что пользователь способен мгновенно перейти от $20 000 к $5 000 000 просто перетащив ползунок от одного конца полосы прокрутки к другому.

    Интерактивный график со счетчиком

    Чтобы увидеть, как будут работать эти два объекта вместе, рассмотрим таблицу со значениями продаж за период с 1 июня 2011 до 28 сентября 2011. Эти даты, если преобразовать их в числа, находятся в диапазоне от 40695 до 40814 (даты в Excel хранятся в виде кол-ва дней, прошедших с 0 января 1900 года).

    В ячейке C2 находится такая формула:

    Эта формула скопирована в остальные ячейки столбца C. К ячейкам C2:C19 применено условное форматирование, которое скрывает любые сообщения об ошибках, т.к. формулы в этих ячейках покажут множество сообщений об ошибке #N/A (#Н/Д). Мы могли бы избежать появления ошибки в столбце C, написав формулу вот так:

    Но в таком случае график покажет множество нулевых значений, а этого нам не нужно. Таким образом, ошибка – это как раз желательный результат.

    Чтобы скрыть ошибки, выделите ячейки в столбце C и нажмите Conditional Formatting > New Rule (Условное форматирование > Создать правило), выберите тип правила Format Only Cells That Contain (Форматировать только ячейки, которые содержат), в первом выпадающем списке выберите Errors (Ошибки) и далее в настройках формата установите белый цвет шрифта, чтобы он сливался с фоном ячеек – это самый эффективный способ скрыть ошибки!

    В ячейке G1 находится вот такая формула =40000+G3, а ячейку G3 мы сделаем связанной со Счетчиком. Установим вот такие параметры: Current Value (Текущее значение) = 695, Minimum Value (Минимальное значение) = 695, Maximum Value (Максимальное значение) = 814, Incremental Change (Шаг изменения) = 7 и Cell Link (Связь с ячейкой) = G3. Протестируйте Счетчик, нажимая на его стрелки, Вы должны видеть в столбце C значение, соответствующее дате в ячейке G1.

    Minimum Value (Минимальное значение) – это число, добавив к которому 40000 мы получим дату 1 июня 2011, а сложив Maximum Value (Максимальное значение) и 40000, – получим дату 28 сентября 2011. Мы установили Шаг изменения равным 7, поэтому даты, которые появляются в ячейке G1, идут с интервалом одна неделя, чтобы соответствовать датам в столбце A. С каждым кликом по стрелкам Счетчика, содержимое ячейки G3 изменяется и показывает одну из дат столбца A.

    Добавляем график

    График создаем из диапазона данных A1:C19, выбираем тип Column chart (Гистограмма). Размер графика сделайте таким, чтобы он закрывал собой столбец C, но, чтобы было видно первую строку листа Excel.

    Чтобы настроить вид графика, необходимо щелкнуть правой кнопкой мыши по одиночному столбцу, показывающему значение для Series 2 (Ряд 2), выбрать Change Series Chart Type (Изменить тип диаграммы для ряда), а затем Line Chart With Markers (График с маркерами). Далее кликаем правой кнопкой мыши по маркеру, выбираем Format Data Series (Формат ряда данных) и настраиваем симпатичный вид маркера. Ещё раз щелкаем правой кнопкой мыши по маркеру и выбираем Add Data Labels (Добавить подписи данных), затем по Легенде, чтобы выделить её и удалить.

    Теперь, когда Вы нажимаете кнопки Счетчика, маркер прыгает по графику, выделяя показатель продаж на ту дату, которая появляется в ячейке G1, а рядом с маркером отображается ярлычок с суммой продаж.

    Существует бесчисленное множество способов использовать Счетчики и Полосы прокрутки на листах Excel. Вы можете использовать их для ввода данных или, как я показал в этой статье, чтобы сделать графики более интерактивными.

    Источник