Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Генератор QR-кода при помощи JavaScript бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
22.12.2023, 14:42
Генератор QR-кода при помощи JavaScript




Здесь представлен генератор QR-кода, который создан при помощи HTML, CSS и JavaScript, который будет генерировать ссылки для перехода на JavaScript. После установочного процесса на сайте или отдельной страницы, пользователи или гости могут ввести текст или URL-адрес, чтобы сгенерировать для него QR-код, что создается по клику. Вам только нужно взять ссылку на данную страницу, куда будет осуществляться переход, и вписать его, а потом при нажатие на генерирование вы получаете QR-код, который в дальнейшем можете установить по месту.

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

Создать генератор QR-код с помощью JavaScript и CSS


Так смотрится по умолчанию:




Здесь уже наблюдаем генерацию данного QR-кода:




Установка:

HEAD

Код

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>


HTML

Код

<div class="form">
  <h1>Создаем генератор QR-кода для сайта</h1>
  <form>
  <input type="url" id="website" name="website" placeholder="http://zornet.ru" required />

  <div id="qrcode-container">
  <div id="qrcode" class="qrcode"></div>
  </div>

  <button type="button" onclick="generateQRCode()">Сгенерировать QR-код</button>
   
</form>
</div>


CSS

Код

.form {
  font-family: Helvetica, sans-serif;
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  padding: 16px;
  background: #ebdddd;
}
.form h1 {
  background: #03773f;
  padding: 20px 0;
  font-weight: 300;
  text-align: center;
  color: #ebebeb;
  margin: -16px -16px 16px -16px;
  font-size: 25px;
}
.form input[type="text"],
.form input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  background: #ebebeb;
  margin-bottom: 4%;
  border: 1px solid #c5b6b6;
  padding: 4%;
  font-size: 17px;
  color: rgb(9, 61, 125);
}
.form input[type="text"]:focus,
.form input[type="url"]:focus {
  box-shadow: 0 0 5px #4d5ba7;
  padding: 4%;
  border: 1px solid #4d5ba7;
}

.form button {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 180px;
  margin: 0 auto;
  padding: 3%;
  background: #064293;
  border: none;  
  border-radius: 3px;
  font-size: 17px;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  color: #ebebeb;
  cursor: pointer;
}
.form button:hover {
  background: rgba(88,104,191, 0.5);
}
#qrcode-container{
  display:none;
}

.qrcode{
  padding: 16px;
  margin-bottom: 30px;
}
.qrcode img{
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
  padding: 4px;
}


JS

Код

<script type="text/javascript">
  function generateQRCode() {
  let website = document.getElementById("website").value;
  if (website) {
  let qrcodeContainer = document.getElementById("qrcode");
  qrcodeContainer.innerHTML = "";
  new QRCode(qrcodeContainer, website);
   
  document.getElementById("qrcode-container").style.display = "block";
  } else {
  alert("Введите корректный адрес");
  }
  }
  </script>


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

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

На этом установка завершена, теперь вы успешно создали генератор QR-кода в HTML, CSS и JavaScript. И как видим, что не чего сложного здесь по установочному процессу нет, все ставим по местам для корректной работы.

Демонстрация

Скачать Генератор QR-кода при помощи JavaScript
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 27 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Веб-элемен...
    KompoZer
    • KompoZer
    • Просмотров: 238
    • Дата: 12.01.2016
    Текстуры (...
    Фоны для ф...
    Скрап набо...
    Стиль для ...
    Небо
    • Небо
    • Просмотров: 221
    • Дата: 13.01.2021