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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
js中数组的常用方法小结
Dec 30 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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生成等比缩略图类和自定义函数分享
2014/06/25 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP5.3新特性小结
2016/02/14 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
js Function类型
2011/12/04 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
班组长竞聘书
2014/03/31 职场文书
购房意向书
2014/04/01 职场文书
《春晓》教学反思
2014/04/20 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
化工厂员工工作总结
2015/10/15 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
《所见》教学反思
2016/02/23 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android