HTML5でチェックイン機能を実装

H5 ユーザー サインインの例 (css+jquery、画像なし) インターネット上にあるユーザー サインインの例は、多くの画像で構成されているか、冗長なコードが多く含まれているため、特別に作られたサインインインターフェイス（モバイル端末）。

css + jquery + htmlのみを使用するh5を使用したモバイル用のユーザー署名サンプルページ。

デモ

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

ショット(スクリーンショット)

この関数を記述する考え方は、最初に日付とチェックイン関連データを構築し、次にサーバーからデータを取得し、元のデータを変更し、最後にそれをレンダリングすることです。

これは、煩雑なロジックの問題を解決する良い方法であり、データは vue.js を使用して直接マウントできます (この記事ではこれを行いません)。

日付データの生成

 //日付データを生成する function buildData() { var da = { dates: [],//1 番目から始まる日付データ current: '',//現在の日付 monthFirst: 1,// 月の 1 日を取得週に等しい Month: 0,//現在の月の日数: 30,//現在の月の日数: 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.getFull Year(), dt.getMonth(), 1).getDay(); da.month = dt.getMonth() + 1; da.days = new Date(dt.getFull Year(), parseInt(da. month), 0).getDate();//現在の月の日数を取得します da.day = dt.getDate() for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false,//署名されているかどうか num: i,//日付 isToday: i == da.day,// 今日であるかどうか isPass: i < da.日が経過しました}; ds[i] = o; da.dates = ds;

データを取得したら、そのデータをインターフェースに変換できます

 // レンダリングデータ関数 renderData(da) { var signedDays = document.getElementById('spSignDays'); var root = document.getElementById(signTable) = ''; td; var st = da.monthFirst; var date = 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); // if (i < st || !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-future'; if (d.isSigned) tdcss = '署名付き ' + tdcss = '<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>' } // かどうかを計算します。最後の行を追加する必要があります if ((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