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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python的subprocess模块总结
2014/11/07 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
金融专业应届生求职信
2013/11/02 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
结婚仪式主持词
2015/06/29 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
Golang流模式之grpc的四种数据流
2022/04/13 Golang
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript