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 eval和JSON之间的联系
Dec 31 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
Vue.js中的组件系统
May 30 Javascript
vue transition 在子组件中失效的解决
Nov 12 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开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python中退出多层循环的方法
2018/11/27 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
如何开启linux的ssh服务
2013/06/03 面试题
2014年父亲节活动方案
2014/03/06 职场文书
大三学习计划书范文
2014/05/02 职场文书
综合素质评价自我评价
2015/03/06 职场文书
无工作证明怎么写
2015/06/15 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
MySQL实现配置主从复制项目实践
2022/03/31 MySQL