指定時間後に操作できなくなるトグルスイッチを作る方法
指定時間後に操作できなくなるトグルスイッチを作る方法を紹介します。このサンプルでは、ページが表示されてから3秒間はトグルスイッチを自由にON・OFFでき、3秒が経過すると自動的に操作できない状態へ切り替わります。一定時間だけ設定を変更できるようにして、時間経過後は変更を受け付けないようにしたい場合に利用できる実装です。
JavaScriptのタイマーを利用してページ表示からの時間を計測し、3秒後にトグルスイッチのチェックボックスへdisabledを設定します。操作できる時間内であれば通常のトグルスイッチとしてON・OFFを切り替えられ、指定時間が経過したあとは現在の状態を維持したまま操作できなくなります。
トグルスイッチのラベル、背景色、サイズ、角丸、ON時の色などはHTMLとCSSから変更できます。また、操作できなくなるまでの待機時間はJavaScriptの数値を変更することで調整できます。このサンプルでは3秒に設定しているため、短時間で動作を確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
3秒以内であればスイッチを自由にON・OFFできます。
現在は操作できます。
ページ表示から3秒間はトグルスイッチをON・OFFできます。3秒が経過すると現在の状態を維持したまま操作できなくなります。「もう一度確認」を押すと再び3秒間操作できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>指定時間後に操作できなくなるトグルスイッチ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トグルスイッチ全体 -->
<div class="timed-disable-toggle_wrap">
<!-- タイトル -->
<div class="timed-disable-toggle_title">
3秒後に操作できなくなるトグルスイッチ
</div>
<!-- 説明文 -->
<p class="timed-disable-toggle_text">
3秒以内であればスイッチを自由にON・OFFできます。
</p>
<!-- トグルスイッチ行 -->
<div class="timed-disable-toggle_row">
<!-- ラベル -->
<div class="timed-disable-toggle_label">
メール通知
</div>
<!-- トグルスイッチ -->
<label class="timed-disable-toggle_switch">
<input
type="checkbox"
data-timed-disable-toggle>
<span class="timed-disable-toggle_slider"></span>
</label>
</div>
<!-- 状態表示 -->
<p
class="timed-disable-toggle_status"
data-timed-disable-status>
現在は操作できます。
</p>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチ、ラベル、説明文、現在の操作状態を表示するメッセージを作成します。CSSではトグルスイッチのサイズ、色、角丸、ON・OFF時の見た目、操作できなくなったときの表示などを設定します。
JavaScriptでは、ページを表示してから3秒を計測し、3秒が経過するとトグルスイッチへdisabledを設定して操作できない状態へ変更します。指定時間が経過するまでは自由にON・OFFを切り替えられ、時間経過後はその時点の状態を維持したまま操作できなくなります。
このサンプルでは、操作できなくなったことが分かるようにスイッチの透明度を下げ、状態表示も「3秒が経過したため操作できません。」へ変更します。操作できなくなるまでの時間はJavaScriptから変更できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。「3秒後に操作できなくなるトグルスイッチ」のタイトル、説明文、「メール通知」のラベル、初期状態の「現在は操作できます。」というメッセージを変更できます。
style.cssはトグルスイッチのデザインを設定するファイルです。全体の横幅や余白、背景色、スイッチの大きさ、OFF時とON時の色、丸い部分のサイズや移動量、操作できなくなったときの透明度などを変更できます。
script.jsは指定時間後にトグルスイッチを操作できなくするファイルです。ページ表示から3秒後にdisabledを有効にし、同時に状態表示を「3秒が経過したため操作できません。」へ変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
ページを開いてから3秒間は「メール通知」のトグルスイッチを自由にON・OFFできます。3秒が経過するとスイッチが操作できない状態へ変わり、それ以降はON・OFFを切り替えられません。時間経過時にONだった場合はONのまま、OFFだった場合はOFFのまま状態が維持されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、「メール通知」のラベル、状態表示の文章を変更できます。通知設定だけでなく、公開設定、表示設定、機能の有効・無効など用途に合わせた表示へ変更できます。
style.cssでは全体の横幅、余白、背景色、スイッチの横幅と高さ、OFF時の背景色、ON時の背景色、丸い部分のサイズ、移動量、無効時の透明度などを変更できます。
script.jsではsetTimeout()に指定している3000を変更することで、トグルスイッチを操作できなくするまでの時間を変更できます。
数値調整
script.js
3000
ページを表示してからトグルスイッチを操作できなくするまでの待機時間です。JavaScriptでは1000ミリ秒が1秒なので、3000は3秒を表します。
1000 → 1秒後
3000 → 3秒後
5000 → 5秒後
10000 → 10秒後
例えば5秒間操作できるようにしたい場合は、script.jsの3000を5000へ変更します。値を大きくすると操作できる時間が長くなり、小さくすると短くなります。
style.css
max-width:700px;
トグルスイッチ全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
gap:20px;
「メール通知」のラベルとトグルスイッチの間隔です。値を大きくすると両者の間隔が広がります。
width:58px;
トグルスイッチ全体の横幅です。値を大きくするとスイッチが横へ広がります。
height:32px;
トグルスイッチ全体の高さです。値を大きくするとスイッチが高くなります。
width:24px;・height:24px;
スイッチ内部にある丸い部分の大きさです。値を大きくすると丸が大きくなります。
top:4px;・left:4px;
丸い部分とスイッチ外側との間隔です。値を変更すると丸の初期位置を調整できます。
transform:translateX(26px);
ONになったときに丸い部分を右へ移動させる距離です。26pxを大きくすると右へ移動する距離が長くなります。
transition:.3s;
スイッチの背景色や丸い部分が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
opacity:.5;
操作できなくなったときのスイッチの透明度です。値を小さくするとさらに薄くなり、1に近づけると通常時に近い濃さになります。
margin:24px 0 0;
状態表示とトグルスイッチの間隔です。24pxを大きくすると間隔が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてトグルスイッチ全体が縮小されます。また、画面幅640px以下ではbodyの余白を24px 12px、トグルスイッチ全体の余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント