ホームページ > 記事 > ウェブフロントエンド > JavaScript は、pictures_javascript スキルを使用して、単純なカウントダウン ポップアップ ウィンドウのデモを実装します
JavaScript は、pictures_javascript スキルを使用して、単純なカウントダウン ポップアップ ウィンドウのデモを実装します
- WBOYオリジナル
- 2016-05-16 16:56:421145ブラウズ
最近、デバイス機能を再起動する必要があったため、カウントダウン ポップアップ インターフェイスを追加したいと思い、簡単な設定 Web ページを作成しました。
最初のアイデアは、アラート ポップアップ ウィンドウをカスタマイズすることでした。しかし、私が望んでいた自動的で継続的な表示効果ではなく、アラートが常にクリック確認を待ってそこに留まることがすぐにわかりました。
その後、DIV から作成したポップアップ ウィンドウを直接表示したり非表示にしたりできるのではないかと考えました。この考えに基づいて、次のようになります:
まずレンダリングを確認します: 
次にソース コードを確認します:
コードをコピーします コードは次のとおりです:
準備中
;再起動の準備に取り組んでいます...4 秒間お待ちください
進行中
再起動操作中... お待ちください14
div id="progress_reboot" ="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|
;/div>
lt;script type="text/javascript">
var cancel_flag = 0;
/* Web ページの読み込みと同時に実行される操作*/
window.onload = reboot();
/* 再起動ボタンのクリック操作*/
function reboot(){
if(confirm("この操作により、現在の接続がすべて切断され、デバイスが再起動されます。続行してもよろしいですか? ")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|" ;
ダウンロード_フラグ = 0;
すでに = 0;
遅延Pre_reboot("reboot_pre_time"); 🎜>}
}
/* 再起動準備ポップアップ ウィンドウを 5 秒間タイマー設定します*/
function latePre_reboot(str) {
if(!cancel_flag){
var late = document .getElementById(str ).innerHTML;
if(遅延 > 0) {
遅延--;
document.getElementById(str).innerHTML = 遅延Pre_reboot('reboot_pre_time; ')", 1000);
} else {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
layDo_reboot("reboot_ing_time");
}
}
}
/* ポップアップ ウィンドウを 15 秒間再起動します*/
function lateDo_reboot(str){
display_reboot(100);遅延 = document.getElementById( str).innerHTML;
if(遅延 > 0) {
document.getElementById(str).innerHTML = 遅延; ('reboot_ing_time')" , 1000);
} else {
hideDiv("reboot_ing");
alert("再起動に成功しました! ");
}
}
/* 再起動準備中のキャンセルボタンのイベント*/
function reboot_cancel(){
cancel_flag = 1;
hideDiv("reboot_pre");
alert("再起動操作が正常にキャンセルされました!");
}
/* ポップアップ ウィンドウを表示します*/
function showDiv (str){
document.getElementById(str) ). style.visibility = "visible";
}
/* ポップアップ ウィンドウを非表示にする*/
function HideDiv (str){
document.getElementById(str).style.visibility = " hidden";
}
/* ポップアップ ウィンドウのタイミングとバッファ バーの移動を再開します*/
function display_reboot(max){
already;
var dispObj = document.all .progress_reboot;
dispObj.style.width = 100.0*already/max "px";
document.all.progress_reboot.innerHTML = "||||"; display( " max ")",1000);
if (already >= max){
window.clearTimeout(timer);
}
}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。