Пример входа пользователя в H5 (css+jquery, без изображения). Поскольку примеры входа пользователя, найденные в Интернете, не очень хороши, либо они состоят из множества картинок, либо содержат много избыточного кода, поэтому я специально сделан интерфейс входа в систему (мобильный терминал).
Пример страницы подписи пользователя для мобильных устройств с использованием h5, в которой используются только CSS + jquery + html.
Демо
https://fallstar0.github.io/SignSample/
Выстрел (скриншот)
некоторые ключевые местаИдея написания этой функции состоит в том, чтобы сначала создать данные, связанные с датой и проверкой, затем получить данные с сервера, изменить исходные данные и, наконец, отобразить их.
Это хороший способ избавиться от проблемы запутанной логики, а данные можно монтировать напрямую с помощью vue.js (в этой статье этого не делается).
Создать данные даты
//Создаем данные о дате function buildData() { var da = { date: [],//Данные о дате, начиная с 1-го текущего: '',//Текущая дата MonthFirst: 1,//Получаем 1-й день месяца равно неделе Month: 0,//Дней текущего месяца: 30,//Сколько дней в текущем месяце day: 0,//Какая сегодня дата isSigned: false, //Если вы вошли в систему сегодня, SignLastDays:3,//Дни непрерывного входа в систему SignToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true }, }; var ds = []; //Инициализируем данные даты var dt = new Date(); da.current = dt.ToString('yyyyyear Mmonth d day'); Date(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.month = dt.getMonth() + 1; da.days = новая дата(dt.getFullYear(), parseInt(da. месяц), 0).getDate();//Получить количество дней в текущем месяце da.day = dt.getDate(); for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false, //Подписано ли число: i, //Date isToday: i == da.day, //Будь то сегодня isPass: я <da.day, //время прошло}; ds[i] = o; } da.dates = ds; return da;
Получив данные, вы можете преобразовать их в интерфейс.
// Функция рендеринга данных renderData(da) { varsignDays = document.getElementById('spSignDays');signDays.innerText = da.signLastDays; var root = document.getElementById(signTable); root.innerHTML = ''; тд; вар ст = da.monthFirst; вар даты = da.dates; //До 6 строк for (var i = 0; i < 42; i++) { if (i % 7 == 0) { //Если даты нет, разбить if (i > (st + da.days) ) Break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr); rowcount++; //Пробел до или после if (i < st || !dates[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; AppendChild(td); continue; } //Заполняем числовую часть var d = date[i - st + 1]; td = document.createElement('td'); tdcss = ''; if (d.isToday) tdcss = 'sign-today'; else if (d.isPass) tdcss = 'sign-pass'; else tdcss = 'sign-future'; tdcss = 'sign-signed' + tdcss; td.innerHTML = '<div class=' +; tdcss + '><span>' + d.num + '</span><svg xmlns=http://www.w3.org/2000/svg version=1.1 class=sign-pin svg-triangle ><Polygon Points =0,0 35,0 0,35 /></svg></div>' } else { tdcss = 'sign-unsign' + tdcss; td.innerHTML = '<div class=' + tdcss + '><span>' + d.num + '</span></div>' } tr.appendChild(td } //Вычисляем, нужно ли Необходимо добавить последнюю строку, если ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr } //Построить данные о дате var da = buildData(); // Отрисовка renderData(da);
Авторское право
Автор[email protected]
https://github.com/FallStar0/SignSample
https://gitee.com/fallstar/SignSample