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模仿hover的具体实现代码
Dec 30 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
图解JavaScript中的this关键字
May 28 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
如何在selenium中使用js实现定位
2020/08/18 Javascript
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
详解Python字符串对象的实现
2015/12/24 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
如何基于Python实现自动扫雷
2020/01/06 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
电子商务自荐书范文
2014/01/04 职场文书
五年级学生评语
2014/04/22 职场文书
工作求职信
2014/07/04 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers