年もすっかり明け、今週もあっという間に週末……
日曜日の午後は意識を保てたものの、頭が悪いんでQiitaの記事を書くのに思ったより時間を使ってしまい、書きたいことを書く時間は取れず……
仕方ない、今週も雑プログラムで埋めるか……
とはいえ、雑プログラムを書くにもどんなものを書くか考えないといけず、ノーコストではないんだよ……

今回やったこと

なでしこで、ただの6桁の乱数をワンタイムパスワード風に表示する。

プログラム

嘘ワンタイムパスワード表示 (プログラム貯蔵庫)

ポイント

パラメータの設定

定数の更新間隔は30000。

新しい乱数を生成する間隔を、ミリ秒単位で指定する。

UIの用意

DOM親要素の「行揃え」に「中央」をDOMスタイル設定。

残り時間メーターは「meter」のDOM部品作成。
それの「幅」に「18em」をDOMスタイル設定。
それの「max」に更新間隔をDOM属性設定。
改行作成。
数値ラベルは「******」のラベル作成。
それの「文字サイズ」に「500%」をDOMスタイル設定。
それの「font-family」に「monospace」をDOMスタイル設定。

次の乱数を生成するまでの時間を表すメーターと、乱数を表示するラベルを用意する。

表示の更新

前回区間は未定義。

●描画とは
  定数の現在時刻はシステム時間ミリ秒。
  定数の経過時間は現在時刻を更新間隔で割った余り。
  更新間隔から経過時間を引いて残り時間メーターの「value」にDOM属性設定。
  定数の区間は現在時刻を更新間隔で割って切り捨て。
  もし、区間が前回区間と等しく無いならば
    1000000の乱数を6でゼロ埋めして数値ラベルにDOMテキスト設定。
    前回区間は区間。
  ここまで。
  {関数}描画を画面更新時実行。
ここまで。

描画。

ミリ秒単位の現在時刻を更新間隔で割り、その商が前回乱数を生成したときから変わっていたら、新しい乱数を生成する。
更新間隔は設定できるようにしたものの、乱数の桁数は面倒なので6で固定である。

また、現在時刻を更新間隔で割った余りに基づき、次の更新までの残り時間をメーターで表示する。

おわりに

なでしこさんで、乱数をワンタイムパスワード風に表示することができた。
特にシードの保存や固定などは行っていないため、本物のワンタイムパスワードとは異なり、更新のタイミングを越えていなくてもリロードするだけで乱数が変わってしまう。
普通に乱数が欲しいのであればもっといいやり方があるだろうし、役には立たなそうだ。
せいぜい、演劇やデモなどでダミーに用いるくらいか……？