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 高级语法介绍
Jun 15 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
Vue简单实现原理详解
May 07 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
2014年工作总结与下年工作计划
2014/11/27 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS