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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
Javascript验证方法大全
Sep 21 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
2014过年倒计时示例
2014/01/31 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python实现音乐下载器
2018/04/15 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python 忽略文件名编码的方法
2020/08/01 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
临床医师专业个人自我评价
2014/01/08 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
经典洗发水广告词
2014/03/13 职场文书
生日宴会策划方案
2014/06/03 职场文书
党性教育心得体会
2014/09/03 职场文书
建筑工地文明标语
2014/10/09 职场文书
国际贸易实训总结
2015/08/03 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android