JavaScript 实现简单的倒计时弹窗DEMO附图


Posted in Javascript onMarch 05, 2014

最近做一个简单的设置网页,因为需要重启设备功能,于是就想在上面加一个倒计时弹窗的界面。

刚开始的想法是自定义一个alert弹窗,但很快就发现,alert会一直停在那里等待点击确认,而不是我想要的那种自动连续显示的效果。

后来,才想到直接显示和隐藏DIV制作成的弹窗,就可以实现了。基于这个思路,于是有了下面的:

先看效果图:
JavaScript 实现简单的倒计时弹窗DEMO附图 
JavaScript 实现简单的倒计时弹窗DEMO附图 
再看源代码:

<!------------------ 重启操作 准备弹窗 ---------------> 
<div id="reboot_pre" style="width: 450px; height: 200px; margin-left:auto; margin-right:auto; margin-top:200px; visibility:hidden; background: #F0F0F0; border:1px solid #00DB00; z-index:9999"> 
<div style="width: 450px; height: 30px; background:#00DB00; line-height:30px;text-align: center;"><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" style="width:70px; height:30px; margin-left:340px" onclick="reboot_cancel()">取消</button></div> 
</div> 
<!------------------ 重启操作 准备弹窗 ---------------> <!------------------ 重启操作 进行弹窗 ---------------> 
<div id="reboot_ing" style="width: 450px; height: 150px; margin-left:auto; margin-right:auto; margin-top:-150px; visibility: hidden; background: #F0F0F0; border:1px solid #00DB00"> 
<div style="width: 450px; height: 30px; background:#00DB00; line-height:30px;text-align: center;"><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;script type="text/javascript"> 
var cancel_flag = 0; 
var already = 0; 
/* 网页一加载就执行的操作 */ 
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 = "|"; 
download_flag = 0; 
cancel_flag = 0; 
already = 0; 
setTimeout("showDiv('reboot_pre')",500); 
delayPre_reboot("reboot_pre_time"); 
} 
} 
/* 重启准备弹窗计时 5秒 */ 
function delayPre_reboot(str) { 
if(!cancel_flag){ 
var delay = document.getElementById(str).innerHTML; 
if(delay > 0) { 
delay--; 
document.getElementById(str).innerHTML = delay; 
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 delay = document.getElementById(str).innerHTML; 
if(delay > 0) { 
delay--; 
document.getElementById(str).innerHTML = delay; 
setTimeout("delayDo_reboot('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 += "|||||"; 
var timer = window.setTimeout("display("+max+")",1000); 
if (already >= max){ 
window.clearTimeout(timer); 
} 
} 
</script>
Javascript 相关文章推荐
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
javascript与有限状态机详解
May 08 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
vuex vue简单使用知识点总结
Aug 29 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
js时间比较示例分享(日期比较)
Mar 05 #Javascript
对于Form表单reset方法的新认识
Mar 05 #Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 #Javascript
7个JS基础知识总结
Mar 05 #Javascript
100个不能错过的实用JS自定义函数
Mar 05 #Javascript
jQuery DOM操作实例
Mar 05 #Javascript
JS父页面与子页面相互传值方法
Mar 05 #Javascript
You might like
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
js实现验证码功能
2020/07/24 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python全排列操作实例分析
2018/07/24 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Python如何批量生成和调用变量
2020/11/21 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
给同学的道歉信
2014/01/16 职场文书
学生打架检讨书
2014/10/20 职场文书
西岭雪山导游词
2015/02/06 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
步步惊心观后感
2015/06/12 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python