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 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
vue增删改查的简单操作
Jul 15 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
微信小程序云开发之使用云存储
May 17 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP静态成员变量
2017/02/14 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
Python中Yield的基本用法
2020/10/18 Python
浅析Python的命名空间与作用域
2020/11/25 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
初中学校军训方案
2014/05/09 职场文书
大学生见习报告总结
2014/11/04 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
学习党章心得体会2016
2016/01/15 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python