最近做了一个简单的设置网页，因为需要重启设备功能，所以想在上面增加一个倒计时弹出界面。最初的想法是定制一个提醒弹出窗口，但很快发现提醒会一直停在那里等待点击确认，而不是我想要的自动连续显示效果。后来我想到用DIV做的弹出窗口可以直接显示和隐藏。基于这个想法，我有以下几点：先看效果图：。

再看源代码：复制代码代码如下：-重启操作准备弹窗-div id=' reboot _ pre ' style=' width : 450 px；高度： 200像素；左边距左：auto右边距：汽车；页边距-顶部：200像素；可见性：隐藏；背景技术： # F0F 0；border:1px实心# 00db 00z-index :9999 ' div style=' width : 450 px；height : 30pxbackground : # 00db 00线高：30 px文本对齐：中心准备中/div br/br/divp style='左边距-:50像素'正在努力为您准备重启操作.还需稍候span id='reboot_pre_time'4/span秒/p/div br/div按钮类型=' button ' style=' width :70 px；高度：30 px左边距-:340 px ' onclick=' reboot _ cancel()'取消/button/div /div！-重启操作准备弹窗- !-重启操作进行弹窗-div id=' reboot _ ing ' style=' width : 450 px；高度： 150像素；左边距左：auto右边距：汽车；边距-top :-150 px；可见性：隐藏；背景技术： # F0F 0；border:1px实心# 00db 00 ' div style=' width : 450 px；height : 30pxbackground : # 00db 00线高：30 px文本对齐：中心进行中/div br/divp style='左边距：40 px '重启操作正在进行中.还需稍候span id=' reboot _ ing _ time ' 14/span秒/p/div br/div id=' progress _ reboot ' style=' margin-left :40 px；color : # 00db 00 font-family : arial；字体粗细：加粗；高度：18 px ' |/div br///div！-重启操作进行弹窗-lt；脚本类型=' text/JavaScript ' var cancel _ flag=0；定义变量已经=0;/* 网页一加载就执行的操作*/窗口。onload=reboot()；/* 重启按钮的单击操作*/函数重新启动(){ if(确认('这个操作会断开现在所有的连接，并且重新启动您的设备，确定要继续操作吗？')){文档。getelementbyid(' reboot _ pre _ time ').innerHTML=4；文件。getelementbyid(' reboot _ ing _ time ').innerHTML=14document。全部。进度_重新启动。innerHTMl=" |下载标志=0;cancel _ flag=0；已经=0;setTimeout(' showDiv(' reboot _ pre ')'，500)；delayPre _ reboot(' reboot _ pre _ time ')；} } /* 重启准备弹窗计时5秒*/function delayPre _ reboot(str){ if(！cancel _ flag){ var delay=document。getelementbyid(str).innerHTMLif(延迟0){ delay-；document.getElementById(字符串)。innerHTML=延迟；setTimeout(' delayPre _ reboot(' reboot _ pre _ time ')'，1000)；} else { HideDiv(' reboot _ pre ')；setTimeout(' showDiv(' reboot _ ing ')'，500)；delayDo _ reboot(' reboot _ ing _ time ')；} } } /* 重启进行中弹窗计时15秒*/function delayDo _ reboot(str){ display _ reboot(100)；var延迟=文档。getelementbyid(str).innerHTMLif(延迟0){ delay-；document.getElementById(字符串)。innerHTML=延迟；setTimeout(' delayDo _ reboot(' reboot _ ing _ time ')'，1000)；} else { HideDiv(' reboot _ ing ')；警报('重启成功!');} } /* 重启准备时取消按钮的事件*/function reboot _ cancel(){ cancel _ flag=1；hideDiv(' reboot _ pre ')；警报('您已经成功取消了重启操作!');} /* 显示弹窗*/函数showDiv(str){文档。getelementbyid(字符串)。风格。可见性='可见'；} /* 隐藏弹窗*/函数hideDiv(str){ document。getelementbyid(字符串)。风格。可见性='隐藏'；} /* 重启进行中弹窗计时，缓冲条的移动*/函数display_reboot(最大值){ 0已经；var dispObj=文档。全部。progress _ rebootdispobj。风格。宽度=100.0 *已经/最大px '；文件。全部。进度_重新启动。innerHTMl=' | | | | |var定时器=窗口。settimeout(' display(' max ')'，1000)；如果(已经=max){ window.clearTimeout(计时器);} }/脚本