JS实现倒计时,包含开始,停止;根据毫秒数和格式,返回毫秒数的时间日期;终止setInterval循环;兼容IE8,
来源:互联网 发布:包装版面设计软件 编辑:程序博客网 时间:2024/06/08 19:26
用js实现一个倒计时,样式没有,是根据自己用的前端框架easyUI自己上的样式
/**是这两个变量设置成全局的,方便后面调用方法来暂停倒计时循环 * var sys_second; var end_time; * */var sys_second;var end_time;var setTimeOut=function(munites){var ddddd=new Date().getTime()+1000*60*munites //十分end_time = new Date(format(ddddd, 'yyyy/MM/dd HH:mm:ss')).getTime();sys_second = (end_time-new Date().getTime());countDown("#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second"); }var setTimeEnd=function(){var ddddd=new Date().getTime()sys_second=0;}var countDown =function(day_elem,hour_elem,minute_elem,second_elem){ //每10毫秒就执行一次的循环 var timer = setInterval(function(){ if (sys_second > 0) { sys_second -= 10; var day = Math.floor((sys_second /1000/ 3600) / 24); var hour = Math.floor((sys_second /1000/ 3600) % 24); var minute = Math.floor((sys_second /1000/ 60) % 60); var second = Math.floor(sys_second/1000 % 60); // var haomiao = Math.floor(sys_second%1000); day_elem && $(day_elem).text(day+'天');//计算天 $(hour_elem).text(hour<10?"0"+hour:hour+'时');//计算小时 $(minute_elem).text(minute<10?"0"+minute:minute+'分');//计算分 $(second_elem).text(second<10?"0"+second:second+'秒');// 计算秒 // $("#haomiao").text(haomiao);// 计算秒 } else { $(hour_elem).text('0时');//计算小时 $(minute_elem).text('0分');//计算分 $(second_elem).text('0秒');// 计算秒 // $("#haomiao").text(haomiao);// 计算秒 clearInterval(timer); } }, 10); }
<div class="time-item" id="demo01"> 估计剩余时间 : <strong id="day" class="day">0天</strong> <strong id="hour" class="hour">0时</strong> <strong id="minute" class="minute">0分</strong> <strong id="second" class="second">0秒</strong> <!-- <strong id="haomiao" class="second">0</strong>毫秒 --></div>因为如果启用毫秒的话,会有比较明显的误差,这里是注释掉了毫秒的。
/**根据毫秒数和 格式,返回毫秒数的时间日期*/ var format = function(time, format){ var t = new Date(time); var tf = function(i){return (i < 10 ? '0' : '') + i}; return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){ switch(a){ case 'yyyy': return tf(t.getFullYear()); break; case 'MM': return tf(t.getMonth() + 1); break; case 'mm': return tf(t.getMinutes()); break; case 'dd': return tf(t.getDate()); break; case 'HH': return tf(t.getHours()); break; case 'ss': return tf(t.getSeconds()); break; } })}
入口是setTimeOut,停止是setTimeEnd;
阅读全文
0 0
- JS实现倒计时,包含开始,停止;根据毫秒数和格式,返回毫秒数的时间日期;终止setInterval循环;兼容IE8,
- JS日期格式字符串转换为日期毫秒数和时间毫秒数转换为日期
- js时间戳(毫秒数)转换为日期格式
- 根据函数System.currentTimeMillis()返回的毫秒数得到日期
- 毫秒数转化为日期时间格式
- js毫秒数自定义时间格式转换
- 毫秒数和日期
- JS、Jquery实现---把后台传过来的时间毫秒数转换成想要的日期格式
- JS、Jquery实现---把后台传过来的时间毫秒数转换成想要的日期格式
- oracle毫秒数和日期时间之间的转换
- js中的时间与毫秒数互相转换,倒计时
- mysql 日期和毫秒数的转换
- 用js将从后台得到的时间戳(毫秒数)转换为想要的日期格式
- 根据基准时间的毫秒数获取现在的时间
- Js时间戳毫秒数转日期格式化
- 获取时间的毫秒数
- js 毫秒数转换为指定格式日期的js代码
- Java日期格式带毫秒数
- nested exception is org.apache.ibatis.exceptions.PersistenceException
- controller中的变量值,直接在浏览器中显示,无需jsp页面
- stylus之条件(Conditionals)
- Android打造万能的对话框Dialog(三)
- 一起艳恶学习打造一个通用的JDBC
- JS实现倒计时,包含开始,停止;根据毫秒数和格式,返回毫秒数的时间日期;终止setInterval循环;兼容IE8,
- PDFObject.js的使用
- 单链表的正向排序,反向排序
- SchemaTron入门一
- ContentProvider和ContentResolver的学习
- Qt无边框窗体移动和缩放
- 二进制中1的个数
- xshell5之ssh隧道连接
- Python基于进程的并发编程