когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Печатаю лотерейный билет. Проблемы с печатью с web-страницы. Проверка на целое число JS
Привет, йо-йо, алоха. Сегодня (13.05.2018) мне нужно было напечатать 350 лотерейных билетов. Эта задача была спонтанной. Не было ни бюджета ни времени, чтобы обратиться в типографию.
Сперва я хотел сделать всё в excel и даже создал шаблон, но как только я начал проверять макет на печати я увидел, что макет пополз. Таблица из которой я делал макет могла разделяться на несколько страниц. И я решил сделать это в html-е потому, что я его лучше знаю.
И так сейчас я вам расскажу как я создал примитивные лотерейные билеты и нормально их распечатал.
Макет
Макет до боли простой, на нём я не буду останавливаться. Я просто сверстал таблицу и добавил немного стилей.
сторона участника
сторона для лототрона
briney.ru
№88
*Главный приз — 1 год хостинга и домен в подарок. *Принимая участие в лотерее вы гарантированно получаете установку и настройку CRM Битрикс24.
Компания
ФИО
Должность
Телефон
Email
№88
Обновления номерка
Мне конечно же нужно было создать уникальный номер для каждого билета. Для этого мне пришёл на помощь javascript. Я написал простою анонимную функцию.
(function(){
// Мой макет таблицы
const table = document.querySelector('.mtt');
// Цикл для создания новых билетов
for(i = 1; i < 351; i++){
// Копирую мою таблицу
let nef = table.cloneNode(true);
// Получаю элементы в которых записывается номер
let numb = nef.querySelectorAll('.n');
numb.forEach((e)=>{
// Меняю номер билета у 2-х элементов
e.textContent = i;
});
// Вставляю новый билет в body
document.body.insertAdjacentElement('beforeend', nef);
}
})();
Мой код создал мне все нужные билеты. Начал печатать, но увидел, что у меня сохранилась проблема с разрывом таблицы и получалось так, что билет печатался на двух страницах. Вот так:
Я подсчитал, что у меня происходит сдвиг каждые 6 элементов. Сначала я поигрался с отступами, но они не помогли т.к. принтер (или браузер) оптимизировал печать так, чтобы лишние пустоты не печатались. И я решил добавлять каждые 6 элементов блок.
Сложность была в написание алгоритма получение именно элемента который делиться на 6 и по порядку дальше на 5 элементов от первого.
Вышла такая функция
(function(){
const table = document.querySelector('.mtt');
// Функция для проверки делиться число ровно на другое.
function isIs(numder, del){
let res = numder / del;
if(res === Math.round(res)){
return true;
}
return false;
}
// Вспомогательная переменная
start = -1;
for(i = 1; i < 50; i++){
let nef = table.cloneNode(true);
let numb = nef.querySelectorAll('.n');
numb.forEach((e)=>{
e.textContent = i;
});
document.body.insertAdjacentElement('beforeend', nef);
// Нахожу порядковый номер элемента
let del = i - start;
// Проверяю, что число не ноль и что оно ровно делиться на 6
if(del !== 0 && isIs(del, 6)){
// Получаю margin-bottom моей таблицы
let nM = parseFloat(nef.style.marginBottom) + 10;
nef.style.marginBottom = nM + 'px';
// Добавляю вспомогательный элемент после таблицы
document.body.insertAdjacentHTML('beforeend', '<hr style="height:4px;padding:0;">');
}
}
})();
Вуаля. Благодаря вспомогательному элементу я напечатал всё как нужно. Но это не всё.
Функция для определения целого числа в JS
В своей задаче я пошёл тупым путём. Я использовал самописную функцию
function isIs(numder, del){
let res = numder / del;
if(res === Math.round(res)){
return true;
}
return false;
}
Для определения целое число или нет я проверял округлённое число и число изначальное равны или нет. Хотя нужно было проверить через метод Number.isInteger. Тогда функция примет вид
function isIs(numder, del){
let res = numder / del;
return Number.isInteger(res);
}
Всё просто. Надеюсь вам будет полезно)
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.