1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れたり、一定時間操作しなかったりすると、デスクトップのロック画面と同様に、システムの開いているすべてのページがロックされる必要があります。確認のためにパスワードを正常に入力するか、再度ログインした後にのみ、ページを操作し続けることができます。ページが更新された場合、ロックされたままにする必要があります。下の写真の通りです。もちろん、ユーザーはロック画面を手動で起動することもできます。目的は、他人がシステムの重要なコンテンツに恣意的にアクセスするのを防ぐことです。では、これをどうやって達成するのでしょうか? 5s ロック画面効果は次のとおりです。 2. アイデア
少し混乱しているので、整理する必要があります。 3. コードの実装以下のコードは不完全であり、HTML 構造は省略されており、自由に使用できます。 // アプリ.vue データ () { 戻る { タイムアウト: 5000、 タイマー: null、 isLock: 'false' } }, マウントされた(){ this.timer = setTimeout(this.lockPro、this.timeOut) // 初回の操作時間を設定する localStorage.setItem('moveTime', Date.now()) //最初の判定ステータス this.modalStatus() // ポーリング監視ステータス setInterval(this.modalStatus, 1000) // マウスイベントをリッスンする this.events() }, 方法:{ イベント() { ウィンドウ.onmousemove = () => { // console.log('マウスが移動しました') ロックされている場合 localStorage.setItem('moveTime', Date.now()) this.clearLocaPro('続行') } } }, モーダルステータス() { localStorage.getItem('isLock') が 'true' の場合 { // console.log('画面がロックされています') this.isLock = true this.clearLocaPro() } それ以外 { // console.log('現在画面はロックされていません') this.isLock = false this.clearLocaPro('続行') } }, ロックプロ() { もし (!this.timeOut) { localStorage.setItem('isLock', 'false') this.clearLocaPro('続行') 戻る } Date.now() - localStorage.getItem('moveTime') < this.timeOut) の場合 { localStorage.setItem('isLock', 'false') this.clearLocaPro('続行') } それ以外 { localStorage.setItem('isLock', 'true') this.clearLocaPro() } }, clearLocaPro(ステータス) { if(this.timer){ タイムアウトをクリアします(this.timer) } if (ステータス === '続行') { this.timer = setTimeout(this.lockPro、this.timeOut) } }, // 手動ロック handleLock(){ this.clearLocaPro() localStorage.setItem('isLock', 'true') }, // パスワードロック解除 unlock(){ localStorage.removeItem('isLock') localStorage.setItem('moveTime', Date.now()) this.clearLocaPro('続行') }, ... // ログアウト時にisLockをクリアすることを忘れないでください } js を使用した自動画面ロックの実装方法についてはこれで終わりです。js を使用した自動画面ロックの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 1 つ以上のフィールドに基づいて重複データを検索する MySQL SQL ステートメント
>>: Linux で Golang をインストールする方法
目次1. 順番に紹介する2. ユーザーを作成する3. ユーザーアカウントを削除する4. アクセス権5...
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...
日々の運用・保守作業において、MySQL データベースのバックアップは重要です。ウェブサイトにとって...
序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...
今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...
CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...
1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...
ssh は私が最も頻繁に使用する 2 つのコマンドライン ツールのうちの 1 つです (もう 1 つ...
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...
幅と高さを直接使用することはできません。 display:block; または display:in...
準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...
ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...
目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...