H5 사용자 로그인 예시(css+jquery, 사진 없음) 인터넷에서 찾아본 사용자 로그인 예시는 사진이 많이 구성되어 있거나 중복된 코드가 많아서 좋지 않습니다. 특별히 로그인 인터페이스(모바일 단말기)를 만들었습니다.
CSS + jquery + html만 사용하는 h5를 사용하는 모바일용 사용자 서명 샘플 페이지입니다.
데모
https://fallstar0.github.io/SignSample/
샷(스크린샷)
몇몇 주요 장소이 함수를 작성한다는 취지는 날짜와 체크인 관련 데이터를 먼저 구성한 뒤, 서버에서 데이터를 얻어와 원본 데이터를 변경하고 최종적으로 렌더링하는 것이다.
이는 지저분한 로직 문제를 제거하는 좋은 방법이며, vue.js를 사용하여 데이터를 직접 마운트할 수 있습니다(이 기사에서는 이 작업을 수행하지 않습니다).
날짜 데이터 생성
//날짜 데이터 생성 function buildData() { var da = { 날짜: [],//1일부터 시작하는 날짜 데이터 현재: '',//현재 날짜 MonthFirst: 1,//매월 1일을 가져옵니다. 이번 주와 같음 월: 0,//이번 달 일수: 30,//이번 달의 일 수: 0,//오늘 날짜는 무엇입니까?Signed: false, //오늘 로그인했는지 여부 signLastDays:3,//연속 로그인 일수 signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true; var ds = [ ]; //날짜 데이터 초기화 var dt = new Date(); da.current = dt.ToString('yyyy 년 M 월 d 일') da.monthFirst = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.month = dt.getMonth() + 1; da.days = new Date(dt.getFullYear(),parseInt(da. Month), 0).getDate();//현재 달의 일수를 가져옵니다. da.day = dt.getDate() for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false,//서명 여부 num: i,//Date isToday: i == da.day,//오늘인지 여부 isPass: i < da.day,//시간이 지났습니다. ds[i] = o; } da.dates = ds;데이터가 있으면 데이터를 인터페이스로 변환할 수 있습니다.
//렌더 데이터 함수 renderData(da) { var signDays = document.getElementById('spSignDays'); signDays.innerText = da.signLastDays; var root = document.getElementById(signTable); var tr, td; var st = da.monthFirst; var 날짜 = da.dates = 0; //최대 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'; 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 =dates[i - st + 1]; document.createElement('td'); tdcss = ''; if (d.isToday) tdcss = 'sign-today'; else if (d.isPass) tdcss = 'sign-pass'; else tdcss = 'sign-future'; 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 ><다각형 포인트 =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); 마지막 행을 추가해야 합니다. if ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr) } //날짜 데이터 구성 var da = buildData(); //렌더링 데이터(da);저작권
https://github.com/FallStar0/SignSample
https://gitee.com/fallstar/SignSample