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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php并发加锁示例
2016/10/17 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
AngularJS HTML编译器介绍
2014/12/06 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python的语言类型(详解)
2017/06/24 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python语言基本语句用法总结
2019/06/11 Python
django创建超级用户过程解析
2019/09/18 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
服装促销活动方案
2014/02/23 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
信息技术培训感言
2014/03/06 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
统计学教授推荐信
2014/09/18 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
英语教师个人总结
2015/02/09 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
初二物理教学反思
2016/02/19 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏