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设置获取和设置属性的方法
Mar 04 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js实现文字滚动效果
Mar 03 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
js实现图片推拉门效果代码实例
May 18 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
浅谈React中组件逻辑复用的那些事儿
May 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
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
python切割图片的示例
2020/11/12 Python
python中K-means算法基础知识点
2021/01/25 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
税务干部个人整改措施思想汇报
2014/10/10 职场文书
房屋认购协议书
2015/01/29 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
MySQL优化及索引解析
2022/03/17 MySQL