ตัวอย่างการลงชื่อเข้าใช้ของผู้ใช้ H5 (css+jquery ไม่มีรูปภาพ) เนื่องจากตัวอย่างการลงชื่อเข้าใช้ของผู้ใช้ที่พบในอินเทอร์เน็ตไม่ดี เนื่องจากมีรูปภาพจำนวนมาก หรือมีโค้ดที่ซ้ำซ้อนจำนวนมาก ฉันจึง อินเทอร์เฟซการลงชื่อเข้าใช้ที่สร้างขึ้นเป็นพิเศษ ( เทอร์มินัลมือถือ)
ผู้ใช้ลงชื่อหน้าตัวอย่างสำหรับมือถือโดยใช้ h5 ซึ่งใช้เฉพาะ css + jquery + html
สาธิต
https://fallstar0.github.io/SignSample/
ช็อต (สกรีนช็อต)
สถานที่สำคัญบางแห่งแนวคิดในการเขียนฟังก์ชันนี้คือการสร้างวันที่และข้อมูลที่เกี่ยวข้องกับการเช็คอินก่อน จากนั้นจึงรับข้อมูลจากเซิร์ฟเวอร์ เปลี่ยนแปลงข้อมูลต้นฉบับ และสุดท้ายจึงเรนเดอร์
นี่เป็นวิธีที่ดีในการกำจัดปัญหาตรรกะที่ยุ่งเหยิง และสามารถติดตั้งข้อมูลได้โดยตรงด้วย vue.js (บทความนี้ไม่ได้ทำเช่นนี้)
สร้างข้อมูลวันที่
//สร้างฟังก์ชันข้อมูลวันที่ buildData() { var da = { วันที่: [],//ข้อมูลวันที่เริ่มต้นจากวันที่ 1: '',//วันที่ปัจจุบัน monthFirst: 1,//รับวันที่ 1 ของเดือน เท่ากับสัปดาห์ เดือน: 0,//วันของเดือนปัจจุบัน: 30,//เดือนปัจจุบันมีกี่วัน: 0,//วันที่ของวันนี้คือวันที่ลงนาม: false, //ไม่ว่าคุณจะลงชื่อเข้าใช้วันนี้ signLastDays:3,//Continuous sign-in days signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true; var ds = [ ]; //เตรียมใช้งานข้อมูลวันที่ var dt = new Date(); da.current = dt.ToString('yyyy year M month d day'); วันที่(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.month = dt.getMonth() + 1; da.days = วันที่ใหม่(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: ฉัน < da. วัน // เวลาผ่านไป};เมื่อคุณมีข้อมูลแล้ว คุณสามารถแปลงข้อมูลเป็นอินเทอร์เฟซได้
//Render ข้อมูลฟังก์ชัน renderData(da) { var signDays = document.getElementById('spSignDays'); signDays.innerText = da.signLastDays; var root = document.getElementById(signTable); td; var st = da.monthFirst; var วันที่ = da.dates; //สูงสุด 6 บรรทัดสำหรับ (var i = 0; i < 42; i++) { if (i % 7 == 0) { //หากไม่มีวันที่ ให้หยุด if (i > (st + da.days) ) แบ่ง ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr); rowcount++; !dates[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; appendChild(td); } //กรอกตัวเลข var d = date[i - st + 1]; td = document.createElement('td'); tdcss = ''; if (d.isToday) tdcss = 'sign-today'; else if (d.isPass) tdcss = 'sign-pass'; อื่น ๆ tdcss = 'sign-future'; tdcss = 'ลงนามแล้ว ' + 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 = 'ลงชื่อไม่ได้ลงชื่อ ' + 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(); //Render renderData(ดา);ลิขสิทธิ์
ผู้เขียน[email protected]
https://github.com/FallStar0/SignSample
https://gitee.com/fallstar/SignSample