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 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
老生常谈的跨域处理
Jan 11 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python中set常用操作汇总
2016/06/30 Python
Python读写docx文件的方法
2018/05/08 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python占用的内存优化教程
2019/07/28 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
Java面试题:为什么要用Java
2012/05/11 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
师范生见习报告范文
2014/11/03 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技