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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
DOM 高级编程
May 06 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
js html实现计算器功能
Nov 13 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python中dict使用方法详解
2019/07/17 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
求职个人评价范文
2014/04/09 职场文书
秋天的雨教学反思
2014/04/27 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫