最近、デバイス機能を再起動する必要があったため、カウントダウン ポップアップ インターフェイスを追加したいと思い、簡単な設定 Web ページを作成しました。
最初のアイデアは、アラート ポップアップ ウィンドウをカスタマイズすることでしたが、私が望んでいた自動的で継続的な表示効果ではなく、アラートが常にクリック確認を待ってそこに留まることがすぐにわかりました。
その後、DIV から作成したポップアップ ウィンドウを直接表示したり非表示にしたりできるのではないかと考えました。この考えに基づいて、次のようになります。
まずレンダリングを見てみましょう。
ソースコードをもう一度見てください。
次のようにコードをコピーします。
<!----------------- 再起動準備ポップアップウィンドウ--------------->
<div id="reboot_pre">
<div><b>準備中</b></div>
<br /><br />
<div><p style="margin-left:50px">再起動操作の準備に全力で取り組んでいます...<span id="reboot_pre_time">4</span> 秒かかります</p> </div >
<br />
<div><button type="button" onclick="reboot_cancel()">キャンセル</button></div>
</div>
<!----------------- 再起動準備ポップアップウィンドウ--------------->
<!----------------- 操作を再起動してウィンドウをポップアップ表示します--------------->
<div id="reboot_ing">
<div><b>進行中</b></div>
<br />
<div><p style="margin-left:40px">再起動操作が進行中です...<span id="reboot_ing_time">14</span> 秒かかります</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!----------------- 操作を再起動してウィンドウをポップアップ表示します--------------->
lt;スクリプトタイプ="text/javascript">
var cancel_flag = 0;
var はすでに = 0;
/* Web ページがロードされるとすぐに実行される操作*/
window.onload = 再起動();
/* 再起動ボタンのクリック操作*/
関数再起動(){
if(confirm("この操作により、現在の接続がすべて切断され、デバイスが再起動されます。続行してもよろしいですか?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
ダウンロードフラグ = 0;
キャンセルフラグ = 0;
すでに = 0;
setTimeout("showDiv('reboot_pre')",500);
遅延Pre_reboot("reboot_pre_time");
}
}
/* 準備ポップアップ ウィンドウを 5 秒間再起動します*/
関数遅延Pre_reboot(str) {
if(!cancel_flag){
var late = document.getElementById(str).innerHTML;
if(遅延 > 0) {
遅れ - ;
document.getElementById(str).innerHTML = 遅延;
setTimeout("遅延Pre_reboot('reboot_pre_time')", 1000);
} それ以外 {
HideDiv("再起動前");
setTimeout("showDiv('reboot_ing')",500);
lateDo_reboot("reboot_ing_time");
}
}
}
/* ポップアップ ウィンドウを 15 秒間再起動します*/
関数遅延Do_reboot(str){
ディスプレイ_リブート(100);
var late = document.getElementById(str).innerHTML;
if(遅延 > 0) {
遅れ - ;
document.getElementById(str).innerHTML = 遅延;
setTimeout("layDo_reboot('reboot_ing_time')", 1000);
} それ以外 {
HideDiv("再起動");
alert("再起動に成功しました!");
}
}
/* 再起動準備時のキャンセルボタンのイベント*/
関数 reboot_cancel(){
キャンセルフラグ = 1;
HideDiv("再起動前");
alert("再起動操作が正常にキャンセルされました!");
}
/* ポップアップウィンドウを表示します */
関数 showDiv (str){
document.getElementById(str).style.visibility = "可視";
}
/*ポップアップウィンドウを非表示にする*/
関数 HideDiv (str){
document.getElementById(str).style.visibility = "非表示";
}
/* 進行中のポップアップ ウィンドウのタイミングを再開し、バッファ バーを移動します*/
関数display_reboot(max){
すでに++;
var dispObj = document.all.progress_reboot;
dispObj.style.width = 100.0*already/max+"px";
document.all.progress_reboot.innerHTML += "|||||";
var timer = window.setTimeout("display("+max+")",1000);
if (すでに >= 最大){
window.clearTimeout(タイマー);
}
}
</script>