مثال H5 لتسجيل دخول المستخدم (css+jquery، بدون صورة). نظرًا لأن أمثلة تسجيل دخول المستخدم الموجودة على الإنترنت ليست جيدة، فهي تتكون من العديد من الصور، أو تحتوي على الكثير من التعليمات البرمجية الزائدة عن الحاجة، لذلك تم إنشاء واجهة تسجيل دخول خصيصًا (محطة متنقلة).
نموذج صفحة تسجيل المستخدم للجوال باستخدام h5 والذي يستخدم فقط CSS + jquery + html.
تجريبي
https://fallstar0.github.io/SignSample/
لقطة (لقطة شاشة)
بعض الأماكن الرئيسيةتتمثل فكرة كتابة هذه الوظيفة في إنشاء التاريخ وتسجيل البيانات ذات الصلة أولاً، ثم الحصول على البيانات من الخادم وتغيير البيانات الأصلية وعرضها أخيرًا.
هذه طريقة جيدة للتخلص من مشكلة المنطق الفوضوي، ويمكن تحميل البيانات مباشرة باستخدام vue.js (هذه المقالة لا تفعل ذلك).
توليد بيانات التاريخ
// إنشاء بيانات التاريخ function buildData() { var da = { dates: [],// بيانات التاريخ، بدءًا من اليوم الأول الحالي: '',// التاريخ الشهري الحالي أولاً: 1,// احصل على اليوم الأول من الشهر يساوي الأسبوع الشهر: 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('yyyy year M Month d day'); 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 }بمجرد حصولك على البيانات، يمكنك تحويل البيانات إلى واجهة
// عرض البيانات function renderData(da) { varsignDays = document.getElementById('spSignDays'); var st = da.monthFirst; var dates = da.dates; // ما يصل إلى 6 أسطر for (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); !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]; tdcss = ''; if (d.isToday) tdcss = 'sign-today'; else if (d.isPass) tdcss = 'sign-pass'; else tdcss = 'sign-future'; tdcss = '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 ><نقاط المضلع =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(); //Render renderData(da);حقوق الطبع والنشر
المؤلف[email protected]
https://github.com/FallStar0/SignSample
https://gitee.com/fallstar/SignSample