HTML5サインイン機能
2022-02-01 06:41:15
紹介
H5のユーザーサインインの例(css+jquery、画像なし)ネットで見つけたユーザーサインインの例は、画像が多かったり冗長なコードで構成されていたりで、あまり良くないので、あえてサインインのインターフェース(モバイル)を作りました。
h5を使用し、css + jquery + htmlのみで構成されたモバイル用ユーザーサインサンプルページです。
デモ
https://fallstar0.github.io/SignSample/
ショット(スクリーンショット)
いくつかのキーポイント
この機能を書くにあたってのアイデアは、まず日付とチェックイン関連のデータを構築し、次にサーバーからデータを取得して元のデータに変更を加え、最後にレンダリングすることです。
そのデータをvue.jsに直接マウントすることで(この記事では行いませんが)、面倒なロジックを排除することができます。
日付データの生成
//generate date data
function buildData() {
var da = {
dates: [],//date data, starting from the 1st
current: '',//the current date
monthFirst: 1,//Get the 1st day of the month equal to the day of the week
month: 0,//the current month
days: 30,//how many days are there in the current month
day: 0,//how many days is today
isSigned: false,//whether today has signed in
signLastDays:3,//consecutive sign-in days
signToday: function () {
this.isSigned = true;
isSigned = true; this.dates[this.day].isSigned = true;
},
};
var ds = [];
//initialize date data
var dt = new Date();
da.current = dt.ToString('yyyy year M month d day');
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();//get the number of days in the current month
da.day = dt.getDate();
for (var i = 1; i < da.days + 1; i++) {
var o = {
isSigned: false,//whether signed in
num: i,//date
isToday: i == da.day,//whether it is today
isPass: i < da.day,//time has passed
};
ds[i] = o;
}
da.dates = ds;
return da;
}
データを取得したら、次はそれをインターフェイスに変換します。
//Render the data
function renderData(da) {
var signDays = document.getElementById('spSignDays');
signDays.innerText = da.signLastDays;
var root = document.getElementById("signTable");
root.innerHTML = '';
var tr, td;
var st = da.monthFirst;
var dates = da.dates;
var rowcount = 0;
//max 6 rows
for (var i = 0; i < 42; i++) {
if (i % 7 == 0) {
//If there is no more date, break
if (i > (st + da.days))
break;
tr = document.createElement('tr');
tr.className = 'darkcolor trb';
root.appendChild(tr);
rowcount++;
}
// blank in front or behind
if (i < st || !dates[i - st + 1]) {
td = document.createElement('td');
td.innerHTML = '<div class="sign-blank"><span></span></div>';
tr.appendChild(td);
continue;
}
//fill the number part
var d = dates[i - st + 1];
td = document.createElement('td');
var tdcss = '';
if (d.isToday)
tdcss = 'sign-today';
else if (d.isPass)
tdcss = 'sign-pass';
else
tdcss = 'sign-future';
if (d.isSigned) {
tdcss = 'sign-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 "><polygon points="0,0 35,0 0,35" /></svg& gt;</div>';
} else {
tdcss = 'sign-unsign ' + tdcss;
td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span></div>';
}
tr.appendChild(td);
}
// Calculate if the last line needs to be added
if ((st + da.days + 1) / 7 > rowcount)
root.appendChild(tr);
}
// Build the date data
var da = buildData();
//render
renderData(da);
著作権について
https://github.com/FallStar0/SignSample
https://gitee.com/fallstar/SignSample
関連
-
404の実装で雪見だいふくをする方法CANVAS
-
HTML5セマンティックタグ(モバイル必須)
-
ローカルファイルの読み書きを行うためのHTML5実装
-
html5 on outbound embedded page 通信問題 (postMessage でクロスドメイン通信を解決)
-
データストレージの3つの方法、Cookie sessionstorage localstorageの類似点と相違点の分析
-
Html5ページで携帯電話の仮想キーボードのポップアップを無効化する方法
-
HTML5 Blobによるファイルダウンロード機能のサンプルコード
-
画像リソースが同一ドメイン下にないために、キャンバスがクロスドメインで汚染される場合の解決策
-
localStorageの有効期限を設定する詳細な方法
-
HTML5でよく使われるセマンティックタグの説明
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン