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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
简单的jQuery入门指引
Jul 28 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
vue中的模态对话框组件实现过程
May 01 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
php实现设计模式中的单例模式详解
2014/10/11 PHP
yii的CURD操作实例详解
2014/12/04 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
设计部经理的岗位职责
2013/11/16 职场文书
美容院经理岗位职责
2014/04/03 职场文书
副总经理任命书
2014/06/05 职场文书
村级个人对照检查材料
2014/08/22 职场文书
党支部承诺书
2015/01/20 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
vue实现滑动解锁功能
2022/03/03 Vue.js
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技