HTML5 mengimplementasikan fungsi check-in

Contoh login pengguna H5 (css+jquery, tidak ada gambar). Karena contoh login pengguna yang ditemukan di Internet tidak bagus, mungkin terdiri dari banyak gambar, atau memiliki banyak kode yang berlebihan, jadi saya antarmuka masuk yang dibuat khusus (terminal seluler).

Halaman contoh tanda pengguna untuk seluler menggunakan h5 yang hanya menggunakan css + jquery + html.

Demo

https://fallstar0.github.io/SignSample/

Bidikan (tangkapan layar)

Ide penulisan fungsi ini adalah pertama-tama membuat data terkait tanggal dan check-in, kemudian memperoleh data dari server, mengubah data asli, dan terakhir merendernya.

Ini adalah cara yang baik untuk menghilangkan masalah logika yang berantakan, dan data dapat dipasang langsung dengan vue.js (artikel ini tidak membahas hal ini).

Hasilkan data tanggal

 //Buat fungsi data tanggal buildData() { var da = { tanggal: [],//Data tanggal, mulai dari tanggal 1 saat ini: '',//Tanggal sekarang bulan Pertama: 1,//Dapatkan hari pertama setiap bulan sama dengan minggu Bulan: 0,//Hari di bulan ini: 30,//Ada berapa hari di bulan ini hari: 0,//Tanggal berapa hari iniDitandatangani: false, //Apakah Anda sudah masuk hari ini signLastDays:3,//Hari masuk terus-menerus signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true; var ds = [ ]; //Inisialisasi data tanggal var dt = Tanggal baru(); da.saat ini = dt.ToString('tahun tgl M bulan hari'); Tanggal(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.bulan = dt.getMonth() + 1; da.days = Tanggal baru(dt.getFullYear(), parseInt(da. bulan), 0).getDate();//Dapatkan jumlah hari dalam bulan berjalan da.day = dt.getDate(); for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false,//Apakah masuk nomor: i,//Tanggal hari ini: i == da.day,//Apakah hari ini isPass: i < tanggal.hari,//waktu telah berlalu}; ds[i] = o; } da.tanggal = ds;

Setelah Anda memiliki data, Anda dapat mengubah data menjadi antarmuka

 //Render fungsi data renderData(da) { var signDays = document.getElementById('spSignDays'); signDays.innerText = da.signLastDays; var root = document.getElementById(signTable); td; var st = da.bulanPertama; var tanggal = da.tanggal; //Hingga 6 baris untuk (var i = 0; i < 42; i++) { if (i % 7 == 0) { //Jika tidak ada tanggal, hancurkan if (i > (st + da.days) ) break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr); !tanggal[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; appendChild(td); lanjutkan; } //Isi bagian nomor var d = tanggal[i - st + 1]; tdcss = ''; if (d.isToday) tdcss = 'tanda tangan-hari ini'; else if (d.isPass) tdcss = 'tanda-lulus'; else tdcss = 'tanda tangan-masa depan'; tdcss = 'tanda-tanda tangan' + 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 ><poin poligon =0,0 35,0 0,35 /></svg></div>'; tdcss; td.innerHTML = '<div class=' + tdcss + '><span>' + d.num + '</span></div>'; } tr.appendChild(td); Perlu menambahkan baris terakhir if ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr } //Membangun data tanggal var da = buildData(); //Render renderData(da);

Hak cipta

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample