js实现精确到秒的倒计时效果


Posted in Javascript onMay 29, 2016

本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下

效果图:

js实现精确到秒的倒计时效果

1.倒计时效果

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <title>倒计时</title>
 <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
 <style type="text/css">
 *{ margin:0; padding:0;}
 .dtime{ margin:10px;}
 .dtime span{ color:#C30;}
 </style> 
 
 </head>
 <body>
  <div class="dtime" id="a1"></div>
 <div class="dtime" id="a2"></div>
 <div class="dtime" id="a3"></div>
 <div class="dtime" id="a4"></div>
 <div class="dtime" id="a5"></div>
 </body> 
 <script>
 function tbdTimeCountdown(args){//倒计时函数
 var ele=document.getElementById(args.id);
 var alltime=args.alltime;
 var arr=[];
 
 var t=Math.floor(alltime/(24*60*60));
 var yt=alltime%(24*60*60);
 
 var s=Math.floor(yt/(60*60));
 var ys=yt%(60*60);
 
 var f=Math.floor(ys/(60));
 var yf=ys%(60);
 
 var m=yf;
 
 arr[0]=[t,"天"];
 arr[1]=[s,"小时"];
 arr[2]=[f,"分"];
 arr[3]=[m,"秒结束"];
 
 var s=ce(arr,0);
 
 ele.innerHTML=s;
 
 var dong;
 
 dong=setInterval(function(){
  alltime-=1;
  if(alltime<=0){
  clearInterval(dong);
  ele.innerHTML="<span>0</span>秒";
  args.end();
  }else{
  t=Math.floor(alltime/(24*60*60));
  yt=alltime%(24*60*60);
 
  s=Math.floor(yt/(60*60));
  ys=yt%(60*60);
 
  f=Math.floor(ys/(60));
  yf=ys%(60);
 
  m=yf;
 
  arr[0]=[t,"天"];
  arr[1]=[s,"小时"];
  arr[2]=[f,"分"];
  arr[3]=[m,"秒结束"];
 
  var s=ce(arr,0);
 
  ele.innerHTML=s;
  };   
 },1000);
 
 function ce(arr,sta){
  var i=sta;
  if(i<arr.length){
  if(arr[i][0]!=0){
   var s="";
   for(var j=i;j<arr.length;j++){
   s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
   };
   return s;
  }else{
   return ce(arr,i+1);
  };
  };
 };
 };//倒计时end
 //效果1
 //86402 3602 62
 tbdTimeCountdown({id:"a1",//含有倒计时容器
 alltime:3,//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
  //alert("倒计时结束才会执行!");
 },
 
 });
 //效果2
 tbdTimeCountdown({id:"a2",//含有倒计时容器
 alltime:62,//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 //效果3
 tbdTimeCountdown({id:"a3",//含有倒计时容器
 alltime:3602,//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a4",//含有倒计时容器
 alltime:86402,//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a5",//含有倒计时容器
 alltime:154789,//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 </script>
</html>

2.倒计时2.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <title>倒计时</title>
 <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
 <style type="text/css">
 *{ margin:0; padding:0;}
 .dtime{ margin:10px;}
 .dtime span{ color:#C30;}
 </style> 
 
 </head>
 <body>
 <div class="dtime" id="a1" alltime="3"></div>
 <div class="dtime" id="a2" alltime="62"></div>
 <div class="dtime" id="a3" alltime="3605"></div>
 <div class="dtime" id="a4" alltime="48605"></div>
 <div class="dtime" id="a5" alltime="123456"></div>
 </body> 
 <script>
 function tbdTimeCountdown(args){//倒计时函数
 var ele=document.getElementById(args.id);
 var alltime=Number(ele.getAttribute(args.alltime));
 var arr=[];
 
 var t=Math.floor(alltime/(24*60*60));
 var yt=alltime%(24*60*60);
 
 var s=Math.floor(yt/(60*60));
 var ys=yt%(60*60);
 
 var f=Math.floor(ys/(60));
 var yf=ys%(60);
 
 var m=yf;
 
 arr[0]=[t,"天"];
 arr[1]=[s,"小时"];
 arr[2]=[f,"分"];
 arr[3]=[m,"秒结束"];
 
 var s=ce(arr,0);
 
 ele.innerHTML=s;
 
 var dong;
 
 dong=setInterval(function(){
  alltime-=1;
  ele.setAttribute(args.alltime,alltime);
  if(alltime<=0){
  clearInterval(dong);
  ele.innerHTML="<span>0</span>秒";
  args.end();
  }else{
  t=Math.floor(alltime/(24*60*60));
  yt=alltime%(24*60*60);
 
  s=Math.floor(yt/(60*60));
  ys=yt%(60*60);
 
  f=Math.floor(ys/(60));
  yf=ys%(60);
 
  m=yf;
 
  arr[0]=[t,"天"];
  arr[1]=[s,"小时"];
  arr[2]=[f,"分"];
  arr[3]=[m,"秒结束"];
 
  var s=ce(arr,0);
 
  ele.innerHTML=s;
  };   
 },1000);
 
 function ce(arr,sta){
  var i=sta;
  if(i<arr.length){
  if(arr[i][0]!=0){
   var s="";
   for(var j=i;j<arr.length;j++){
   s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
   };
   return s;
  }else{
   return ce(arr,i+1);
  };
  };
 };
 };//倒计时end
 //效果1
 //86402 3602 62
 tbdTimeCountdown({id:"a1",//含有倒计时容器
 alltime:"alltime",//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
  alert("倒计时结束才会执行!");
 },
 
 });
 //效果2
 tbdTimeCountdown({id:"a2",//含有倒计时容器
 alltime:"alltime",//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 //效果3
 tbdTimeCountdown({id:"a3",//含有倒计时容器
 alltime:"alltime",//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a4",//含有倒计时容器
 alltime:"alltime",//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a5",//含有倒计时容器
 alltime:"alltime",//倒计时总秒数
 end:function(){//倒计时结束,时间为0是调用的函数
 },
 
 });
 </script>
</html>

大家可以参考专题 《js倒计时功能汇总》 进行深入学习。

以上就是本文的全部内容,希望对大家学习JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
详解vue 命名视图
Aug 14 Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 #Javascript
深入理解js数组的sort排序
May 28 #Javascript
深入理解js函数的作用域与this指向
May 28 #Javascript
js和C# 时间日期格式转换的简单实例
May 28 #Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 #Javascript
深入理解JS函数的参数(arguments)的使用
May 28 #Javascript
You might like
投票管理程序
2006/10/09 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python实现AES加密和解密
2019/03/27 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
成人教育自我鉴定
2013/11/01 职场文书
美发店5.1活动方案
2014/01/24 职场文书
关爱残疾人标语
2014/06/25 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书