Как html элемент вставить в qr код
Перейти к содержимому

Как html элемент вставить в qr код

  • автор:

Как сделать QR-код со ссылкой на сайт

QR-код со ссылкой на сайт

Всем привет. Сегодня хотел бы поговорить с вами о том, что такое QR-код, зачем он нужен, как его использовать и как сделать QR-код для своего landing page.

Думаю, это достаточно интересный инструмент, которому можно найти массу применений.

Что такое QR-код

QR-код — это двухмерный штрих-код (бар-код), предоставляющий информацию для быстрого ее распознавания с помощью камеры на мобильном телефоне.

Зачем нужен QR-код и где его использовать

Как уже говорилось выше, в QR-код можно зашифровать различную информацию. Любой текст, ссылку, визитную карточку и т.п. Все это можно использовать в различных целях. Нас, как владельцев сайтов, в первую очередь интересует ссылка на сайт. А QR-код, скорее всего, будем использовать в рекламных целях.

Итак, как вы уже, наверное, догадались QR-код со ссылкой на сайт можно использовать на различной полиграфической продукции. Например, на визитках, билбордах, газетах и журналах.

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

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

В южной Корее, сеть магазинов придумала устройство для отбрасывания тени в виде QR-кода. Таким образом, когда солнце было в зените, считав такой код, можно было получить скидки на товары. Так, они подняли продажи в «неходовое» дневное время.

Нью-йоркская организация Notify NYC по всему городу расположила изображения QR-кодов, считав которые, можно автоматически вызвать экстренные службы.

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

Как видите, вариантов использования QR-кодов — масса. Все ограничивается только вашей фантазией.

Как получить QR-код со ссылкой на свой сайт

Теперь самое интересное и самое простое. Давайте получим QR-код со ссылкой на свой landing page. Для этого воспользуемся одним из специальных сайтов-генераторов QR-кодов.

  • business-qr-code.ru
  • qrcoder.ru
  • ru.qr-code-generator.com

Я воспользуюсь вторым сервисом. Для того, чтобы получить QR-код со ссылкой на сайт, просто укажите его адрес:

QR-код со ссылкой на сайт

Жмите кнопку «Создать код» и справа появится изображение и постоянная ссылка на него:

Как создать qr-код для сайта

Вот и все. Теперь вы знаете как сделать QR-код со ссылкой на свой сайт. А какие вы знаете интересные способы применения QR-кодов?

Генерация QR-кодов на JS в 4 шага. Node.js + qrcode

Сегодня сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm , установите их с официального сайта.

Шаг 1. Создание нового проекта npm

Откройте терминал и введите или скопируйте эти три команды:

mkdir qr-api cd qr-api npm init -y 

Появится новая папка с пустым проектом на Node.js, и вы перейдёте сразу в неё:

Шаг 2. Установка express и qrcode

Нам понадобятся пакеты express (для создания сервера) и qrcode (для генерации QR-кодов). Установим оба:

npm install express qrcode 

Так выглядит успешная установка:

Шаг 3. Код API

В Visual Studio Code (или другом редакторе кода) в папке с проектом создайте файл index.js и добавьте следующий код:

const express = require('express'); const QRCode = require('qrcode'); const app = express(); const PORT = 3000; app.get('/generate', async (req, res) => < const url = req.query.url; if (!url) < return res.status(400).send('URL не указан.'); >try < const qr = await QRCode.toDataURL(url); res.send(``); > catch (err) < res.status(500).send('Ошибка при создании QR-кода.'); >>); app.listen(PORT, () => < console.log(`Сервер запущен по адресу http://localhost:$`); >); 

Этот код создаёт сервер, который принимает URL через query-параметр и возвращает QR-код этой ссылки.

Шаг 4. Запуск сервера

Чтобы запустить API, напишите в терминале эту команду и нажмите Enter.

node index.js 

Если всё верно — увидите сообщение о том, что сервер запущен:

Шаг 5. Проверка, что всё работает

Откройте браузер и перейдите по адресу:

http://localhost:3000/generate?url=https://htmlacademy.ru 

Вы увидите QR-код для ссылки https://htmlacademy.ru :

Теперь у вас есть простой сервер, который генерирует QR-коды для ссылок. Используйте с умом ��

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Объект URL в JavaScript: полный разбор

Объект URL в JavaScript: полный разбор

Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.

Создать объект URL можно двумя способами:

Конструктор URL() — самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.

const url = new URL("https://www.example.com/path?query=123#hash"); 

Использование window.location — это глобальный объект в браузерах, который содержит информацию о текущем URL.

const currentUrl = new URL(window.location.href); 
  • 23 января 2024

ChatGPT не справляется

ChatGPT не справляется

Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.

  • 2 ноября 2023

Знакомство с JavaScript

Знакомство с JavaScript

Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.

Вы можете добавить JavaScript в ваш HTML-документ двумя способами:

Встроенный JavaScript: непосредственно в HTML-документ, в тегах :

  

Внешний JavaScript: подключение внешнего .js файла к HTML-документу:

  • 1 ноября 2023

Событие onclick в JS на примерах

Событие onclick в JS на примерах

Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick . В этой статье мы подробно разберёмся, что такое событие onclick , как его использовать и приведем примеры применения.

Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.

  • 30 октября 2023

Как перевернуть сайт. Самая короткая инструкция

Как перевернуть сайт. Самая короткая инструкция

Не представляем, зачем это может понадобиться, но не могли пройти мимо.

Никакой магии. Мы вызываем JavaScript-функцию rotateBody() , которая применяет свойство transform с значением rotate(180deg) к элементу . Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри будет повернуто на 180 градусов (то есть, встанет вниз головой)

function rotateBody() < document.body.style.transform = 'rotate(180deg)'; > 

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

let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; > 

Надеемся, вы прочитали это описание до того, как нажать на кнопку.

  • 25 октября 2023

Как узнать геолокацию: Geolocation API

Как узнать геолокацию: Geolocation API

Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.

Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.

  • 16 октября 2023

Что такое localStorage и как им пользоваться

Что такое localStorage и как им пользоваться

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

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

  • 12 октября 2023

Случайное число из диапазона

Случайное число из диапазона

Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:

function getRandomInRange(min, max)
  1. Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
  2. (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
  3. Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
  4. Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
  5. . + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
  6. Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.

Чтобы протестировать, запустите:

console.log(getRandomInRange(1, 10)); // Тест 
  • 7 сентября 2023

В чём разница между var и let

В чём разница между var и let

Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let , и что выбрать в каждом случае. Объясняем.

var и let — это просто два способа объявить переменную. Вот так:

var x = 10; let y = 20; 

Переменная, объявленная через var , доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.

function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError 

Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.

Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.

if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError 

В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.

if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError 

Если переменная j объявлена в цикле с let , она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.

  • 30 августа 2023

Быстрый гайд по if, else, else if в JavaScript

Быстрый гайд по if, else, else if в JavaScript

Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.

Это можно описать с помощью оператора if .

let weather = "sunny"; if (weather === "sunny")

А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.

Этот сценарий можно описать с помощью if-else .

let weather = "rainy"; if (weather === "sunny") < console.log("Возьму солнечные очки"); >else

Условный оператор if-else if-else

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

И всё это очень легко описывается кодом:

let weather = "sunny"; let time = "morning"; if (weather === "rainy") < // если дождь, то только так console.log("Еду на автобусе"); >else if (time === "morning") < // если не дождь и утро console.log("Еду на велике мимо пробок"); >else < // если второе не дождь и не утро console.log("Еду на машине"); >

Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.

  • 30 августа 2023

Как создать QR-код для сайта

Куда бы вы ни пошли, вы видите эти квадратные черно-белые штрих-коды. Их оставляют везде: на входах в здания, на столах кафе и на упаковках продуктов. Даже по телевизору вам предлагают отсканировать QR-код на сайт, чтобы узнать больше информации.

Но что такое QR-коды на самом деле? Как их создать и просто ли это? Обо всём этом вы узнаете в нашей статье.

Что такое QR-код

Буквы «QR» расшифровываются как «Quick Response» (с англ. «быстрый ответ»). Таким образом, QR-код – это двумерный матричный штрих-код, который можно считывать и сканировать с помощью разных устройств, таких как камера смартфона или приложение. Они могут быстро обрабатывать информацию, содержащуюся в определённом расположении пикселей QR-кода, что делает его удобным способом хранения данных и доступа к ним.

Стандартные штрих-коды могут хранить только небольшое количество информации, в то время как QR-коды вмещают значительно больше элементов. QR-код может содержать URL-адреса веб-сайтов, номера телефонов или текст длиной до 4000 символов.

Для чего нужен QR-код

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

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

Предоставить доступ к Wi-Fi. Вы можете сэкономить время своих клиентов и сделать процесс подключения к сети Wi-Fi гораздо проще, позволив им просто отсканировать QR-код на своём смартфоне.

Осовременить свой бизнес. По мере того, как мир меняется и становится более технологически продвинутым, меню с QR-кодом начали заменять бумажные меню в ресторанах, барах, кафе и даже салонах. Кроме того, если вы управляете рестораном и хотите внедрить бесконтактные транзакции, вы можете отображать QR-коды, чтобы клиенты могли заказывать и оплачивать одним сканированием.

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

Увеличить количество загрузок приложения. Использование QR-кода также может перенаправлять аудиторию на целевую страницу, где они могут сразу загрузить приложение.

Как сделать QR-код

Это весьма несложное дело, особенно если учитывать то огромное множество сервисов и способов, которые помогут вам сгенерировать уникальный код.

Способ 1. Онлайн-сервисы для создания QR-кодов

Различных сервисов в интернете так много, что их и не счесть. Если вам сложно выбрать какой-то конкретный, то ищите генератор с удобным интерфейсом, который позволит вам мгновенно и без лишних раздумий сгенерировать QR-код.

Ниже представлены наиболее популярные генераторы QR-кодов.

Adobe Express. QR Code Generator

Adobe Express позволяет бесплатно создать QR-код, перенаправляющий на веб-сайт. Вы можете выбрать как будет выглядеть ваш код: определиться с цветом и формой изображения.

GOQR

События, ссылки, SMS, местоположение, простой текст, электронная почта, vCard, звонки, Wi-Fi – все это вы сможете преобразовать в код благодаря онлайн-сервису GOQR.me. Просто добавьте в окно ввода текст или URL-адрес вашего сайта, а затем получите QR-код и скачать его в удобном формате.

Qrcoder

Qrcoder можно по праву назвать наиболее простым и удобным онлайн-сервисом по генерации QR-кодов. Его функционал не так широк, как у многих аналогов, однако он позволяет закодировать любой текст, ссылку, визитную карточку или SMS-сообщение. Вы сможете выбрать один из шести доступных размеров своего QR-кода.

QRCode-Monkey

Сервис QRCode-Monkey сгенерирует QR-код, имея лишь ссылку, обычный текст, контакты, профили Facebook, Twitter, YouTube, SMS, номера телефонов, местоположение, адреса электронной почты или Wi-Fi. Цвет, логотип, дизайн и качество будущего кода – абсолютно все на ваше усмотрение.

QR-code-generator

Возможности онлайн-сервиса Qr-code-generator крайне широки. Он не преобладает над аналогами, однако позволяет сконвертировать в код большое количество информации: ссылки, текст, Wi-Fi, контакт, профили VK, Facebook, YouTube, данные с сервиса Whois и прочее. Кроме того, вы сможете выбрать цвет, размер изображения и качество отображения данных.

Qrkodgenerator

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

QR-code Tech-IT

Сервис позволяет конвертировать в QR-код следующие типы данных: URL-адреса, контакты, профиль Twitter, SMS, мероприятия, адреса электронной почты, Wi-Fi. Простой вариант, который без проблем и ошибок поможет вам создать нужный QR-код.

Creambee

Благодаря русскоязычному онлайн-сервису Creambee вы сможете зашифровать URL-адреса, контакты, профиль Twitter, Facebook, данные электронной почты, SMS. При необходимости можно оформить больше возможностей для создания QR-кодов благодаря платным предложениям, однако это недешёвое удовольствие, поэтому мы советуем вам прежде всего рассмотреть другие сервисы из нашего списка.

Website Planet

С этим сервисом вы сможете преобразовать в QR-код следующие типы информации – URL-адреса, текст, vCard, meCard, номер телефона, календарь, геолокацию события, профиль Twitter, Facebook, адрес электронной почты, Wi-Fi, PayPal и мессенджер. Более того, этот сервис позволит изменить цвет вашего кода и добавить логотип компании.

QR Stuff

У этого генератора QR-кодов отсутствует русскоязычная версия, поэтому вы можете столкнуться с определёнными проблемами. Однако его функции не сильно отличаются от предлагаемых другими бесплатными онлайн-сервисами: можно закодировать URL-адреса, геолокацию, видео YouTube, профили Facebook, LinkedIn, Instagram, Twitter, простой текст, SMS, Wi-Fi, события календаря, адреса электронной почты и многое другое. Кроме того, есть возможность изменить цвет и форму вашего кода, а также добавить логотип компании.

Важно: как выберете наиболее привлекательный для вас сервис, проведите скан-тест. Это поможет вам определить, работает ли QR-код и показывает ли правильный URL-адрес или зашифрованный файл.

А затем просто скачайте его и используйте. Теперь, когда вы уверены, что ваш QR-код работает, вы можете загружать и распространять его в интернете и любых бумажных носителях.

Способ 2. Через Google Chrome

Браузер Google Chrome включает бесплатный генератор QR-кода для веб-страниц.

Функция бесплатного генератора QR встроена в систему «Поделиться» в Chrome как на Android, так и на iOS, а также доступна в каждой компьютерной версии Chrome.

В разных версиях Chrome QR-коды отображаются по-разному. В настоящее время Chrome для Android и ПК-версии отображают QR-код с динозавром посередине, а Chrome для iOS предоставляет стандартный QR-код без логотипа.

Инструкция для ПК:

  1. Зайдите на выбранный сайт.
  2. В конце адресной строки выберите значок «Поделиться этой страницей».
  3. Щелкните по параметру «Создать QR-код».
  4. Сгенерированный QR-код сразу отобразится в верхней правой части браузера. Затем вы можете отсканировать изображение или нажать кнопку «Загрузить», чтобы сохранить его.

Инструкция для iOS

  1. Перейдите на ваш сайт.
  2. В верхней части экрана выберите «Поделиться».
  3. А затем – «Создать QR-код».
  4. Последним шагом будет скачать полученный код. Это можно сделать с помощью параметра «Поделиться» под QR-кодом.

Инструкция для Android

  1. Откройте нужную страницу. В нашем случае это сайт nic.ru.
  2. В правом верхнем углу экрана нажмите на три точки.
  3. Открывшееся меню предложит вам опцию «Поделиться…» – выберите ее.

  1. Нажмите на кнопку «QR-код» в нижнем разделе. Если не видите его сразу, пролистайте варианты вправо.

Способ 3. С помощью расширений браузера

У разных браузеров есть множество генераторов QR-кодов, которые вы можете установить. Мы подобрали для вас наиболее простые и популярные.

Opera и Yandex.Browser

Так как у браузеров Опера и Яндекс общий каталог расширений, не имеет смысла рассматривать их отдельно. Одним из самых удобных вариантов для вас станет Quick QR Code Generator.

  1. Установите расширение.
  2. Зайдите на сайт, который хотите зашифровать в QR-код. (Важно: этот пункт можно пропустить и сразу перейти к шагу 3, он необязательный).
  3. В Opera в верхней части экрана нажмите на куб, чтобы открыть окно расширений. Выберите Quick QR Code Generator.

В Яндекс Браузере после установки расширение само отобразится в правом верхнем углу в виде чёрного квадрата. Нажмите на него.

  1. Готово! Вы можете скачать свой код, щелкнув Download или нажав правой кнопкой мыши по QR-коду и выбрав «Сохранить изображение как…».

Microsoft Edge

Генератор QR-кода – это идеальное расширение для того, чтобы преобразовать вашу ссылку в QR-код. Лаконичный и понятный интерфейс порадует вас.

  1. Установите расширение.
  2. Зайдите на сайт, который хотите зашифровать в QR-код. (Важно: этот пункт можно пропустить и сразу перейти к шагу 3, он необязательный)
  3. В правом углу вашего браузера вы увидите значок пазла. Щелкните по нему – так вы откроете список расширений. Выберите Генератор QR-кода.

  1. Код автоматически готов. Скачать его можно или нажав на Download, или щёлкнув правой кнопкой мыши и выбрав «Сохранить как…».

Safari

Установка расширений в Safari несколько отличается от всех остальных браузеров. Их нужно загружать через официальный магазин приложений, как и любую другую программу. К тому же, эти расширения могут быть вполне самостоятельными сервисами, которые работают и вне браузера.

  1. Загрузите и установите расширение Kuar – генератор QR-кодов через App Store. Для этого может понадобиться ввести свой Apple ID и пароль.
  2. Далее откройте программу и вернитесь в Safari. Ваш браузер сообщит вам о новом расширении. Нажмите «Просмотреть расширение…».

  1. Поставьте галочку рядом с расширением Kuar. Подтвердите выбор.

  1. Готово! Теперь рядом с адресной строкой есть значок QR-кода. Нажав на него, вы сможете получить код сайта, на котором находитесь.

Если вы вдруг захотите сделать код для другого сайта или изменить стиль и размер своего QR-кода, то откройте настройки с помощью кнопки в нижнем правом углу.

Способ 4. В социальных сетях

Если вы постоянно размещаете посты на сайтах социальных сетей, QR-код может упростить доступ людей к вашим профилям. Хотя вы можете создать QR-код для любой из ваших учетных записей в социальных сетях с помощью вышеуказанных онлайн-сервисов, некоторые службы социальных сетей встраивают доступ к QR-кодам прямо в свои приложения. Например, такие социальные сети как VK, Twitter предоставляют QR-коды в своих приложениях для iOS и Android соответственно. Чаще всего они находятся в разделе настроек.

Заключение

Как вы уже поняли, QR-коды играют немалую роль в современных реалиях. Следуйте инструкциям в этой статье и используйте один из бесплатных генераторов QR-кодов, которые мы порекомендовали, чтобы улучшить узнаваемость своего бизнеса и облегчить многие рабочие процессы для своих клиентов и сотрудников.

QR-код для ссылки на страницу

QR-код для ссылки на страницу

Данное решение может пригодиться, если у посетителя есть потребность перейти с десктопа на мобильный.

QR-код генерируется через api сервиса goqr.me, а само решение выполнено для библиотеки jQuery

Пример:

Показать QR-код ссылки

HTML:

CSS:

.qrcodedata < position : fixed ; z-index : 9999999 ; width : 100% ; height : 100% ; background : rgba ( 0,0,0,0.8 ) ; display : none ; .qrcodedata < background : transparent ; top : -120vh ; display : flex ; flex-flow : column ; align-items : center ; justify-content : center ; transition : top 0.3s ; pointer-events : none ; .qrcodeexit < color : #FFF ; float : right ; font-size : 40px ; margin : 20px 40px ; cursor : pointer ; dipslay : inline-block ; .qrcodetext < background : #FFF ; pointer-events : auto ; padding : 40px ; border-radius : 6px ; text-align : center ; .qrcodetext p < line-height : 1.3 ; margin : 0 0 40px 0 ; .qrcodeloader < display : flex ; align-items : center ; justify-content : center ; width : 250px ; height : 250px ; position : relative ; .qrcodeload < width : 88px ; height : 88px ; border : 4px solid #6ebeff ; border-radius : 50% ; display : inline-block ; position : absolute ; box-sizing : border-box ; animation : rotation 1s linear infinite ; .qrcodeload:after < box-sizing : border-box ; position : absolute ; transform : translate ( -50%, -50% ) ; width : 60px ; height : 60px ; border-radius : 50% ; border : 6px solid ; border-color : #337AB7 transparent ; @keyframes rotation < transform : rotate ( 0deg ) ; transform : rotate ( 360deg ) ; @media (max-width:991px) < .qrcodeexit < font-size : 20px ; margin : 10px 20px ; .qrcodetext < padding : 20px ; display : inline-flex ; margin : 10px ; text-decoration : none ; position : relative ; font-size : 20px ; line-height : 20px ; padding : 12px 30px ; color : #FFF ; font-weight : bold ; text-transform : uppercase ; font-family : 'Roboto' , Тahoma, sans-serif ; background : #337AB7 ; cursor : pointer ; border : 2px solid #BFE2FF ; .qrcodebtn:hover, .qrcodebtn:active, .qrcodebtn:focus < color : #FFF ; .qrcodebtn:after, .qrcodebtn:before < position : absolute ; height : 4px ; background : #337AB7 ; bottom : -6px ; transition : all 280ms ease-in-out ; .qrcodebtn:before < .qrcodebtn:hover:after, .qrcodebtn:hover:before, .qrcodebtn:active:after, .qrcodebtn:active:before, .qrcodebtn:focus:after, .qrcodebtn:focus:before < width : 100% ;

jQuery:

let qrok = false ;
$ ( ‘.qrcodebtn’ ) . on ( ‘click’ , function ( ) < if ( qrok === false ) < qrok = true ; $ ( 'body' ) . append ( '\

Для перехода на эту страницу
в браузере телефона
отсканируйте QR-код

\
$ ( ‘.qrcodebg’ ) . fadeIn ( ) ;
$ ( ‘.qrcodedata’ ) . css ( ‘top’ , ‘0’ ) ;
var image = new Image ( ) ;
var nric = document . location . href ;
image . src = ‘https://api.qrserver.com/v1/create-qr-code/?data=’ + nric + ‘&size=250×250’ ;
setTimeout ( function ( ) < if ( image . width === 0 ) < $ ( '.qrcodeloader' ) . html ( 'Ошибка при создании QR-кода' ) ;

$ ( ‘.qrcodeloader’ ) . html ( ‘+ image . src + ‘» />’ ) ;

$ ( document ) . on ( ‘click’ , ‘.qrcodebg’ , function ( ) < $ ( '.qrcodebg' ) . fadeOut ( ) ; $ ( '.qrcodedata' ) . css ( 'top' , '-120vh' ) ; $ ( document ) . keyup ( function ( e ) < if ( e . key === "Escape" || e . keyCode === 27 ) < $ ( '.qrcodebg' ) . fadeOut ( ) ; $ ( '.qrcodedata' ) . css ( 'top' , '-120vh' ) ;

  • При нажатии на кнопку с классом qrcodebtn , данный скрипт создает и открывает модальное окно. Если по истечении одной секунды мы получили изображение с api.qrserver.com QR-кода ссылки, то показываем его, в противном случае показываем ошибку
  • Пример использования можно увидеть на b2b медиаресурсе о розничной торговле «Точка продаж»: «QR-коды – улучшаем клиентский путь посетителя сайта» в правом фиксированном меню
  • Документация: QR Code Generator API

Нравится 20
В закладки

  • Опубликовано: 02.09.2022 / Обновлено: 09.01.2023
  • Рубрики: Весь сайт, Модальные окна
  • Метки: jQuery, Авторское
  • 3875 просмотров
Смотрите также:

Простое модальное окно на JS

Простое модальное окно на JS

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

Новогоднее украшение для логотипа

Новогоднее украшение для логотипа

Оформления логотипа сайта новогодним элементом на примере лого ВКонтакте

Наклонная галерея

Наклонная галерея

Небольшой скрипт на jQuery с наклонной каруселью фотографий

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

Фёдор Тимофеев: 11.12.2022 в 18:19

А зачем заморачиваться ку кодом, если в гугл хроме есть такая функция?
Нажми в адресной строке в конце справа на стрелку поделиться и вуаля. Там ВК, ватсап, твитер, ку код . Но вы молодец. Добавился в друзья в ВК. Рад что встретил вас.

Глеб: 12.12.2023 в 11:35

Федор, вы правы. Но про эту возможность не все знают, а тут предлагается забота и лояльное решение для посетителя сайта — сразу на виду эта функция в удобном формате.

Станислав: 06.09.2022 в 12:18
Прикольно, но на двух сайтах пробовал установить и не открывается((
Alexander: 07.09.2022 в 19:31
По QR перейти на страницу не получается?
Станислав: 13.12.2023 в 19:10

Здравствуйте. Смотрю умников в комментариях везде хватает. Конечно немного перепробовав и у меня получилось ещё тогда, год назад, установив плагин jQuery Manager for WordPress. Случайно наткнулся на реплики и решил плагин этот упомянуть в комментарии.

Владимир: 21.10.2022 в 12:01
попробуй установить на страницу в виде фотографии
Алексей: 06.11.2022 в 13:25

Все устанавливается и работает великолепно, возможно просто нужны прямые руки. Установил у себя — клик

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *