JS倒计时实例_天时分秒


Posted in Javascript onAugust 22, 2017

HTML代码:

<div id="times_wrap" class="time_num">
 距离结束时间:
 <div class="time_w">
  <b id="times_d" class="time"> </b>天
  <b id="times_h" class="time"> </b>时
  <b id="times_m" class="time"> </b>分
  <b id="times_s" class="time"> </b>秒
 </div>
</div>

JavaScript代码:

<script type="text/javascript">
setTimeout("show_time()",1000);
var time_wrap = document.getElementByIdx_x("times_wrap");
var time_d = document.getElementByIdx_x("times_d");
var time_h = document.getElementByIdx_x("times_h");
var time_m = document.getElementByIdx_x("times_m");
var time_s = document.getElementByIdx_x("times_s");

var time_end = new Date("2012/10/29 08:00:00"); // 设定结束时间
time_end = time_end.getTime();

function show_time(){
 var time_now = new Date(); // 获取当前时间
  time_now = time_now.getTime();
 var time_distance = time_end - time_now; // 结束时间减去当前时间
 var int_day, int_hour, int_minute, int_second;
 if(time_distance >= 0){
  // 天时分秒换算
  int_day = Math.floor(time_distance/86400000)
  time_distance -= int_day * 86400000;
  int_hour = Math.floor(time_distance/3600000)
  time_distance -= int_hour * 3600000;
  int_minute = Math.floor(time_distance/60000)
  time_distance -= int_minute * 60000;
  int_second = Math.floor(time_distance/1000)
 
  // 时分秒为单数时、前面加零站位
  if(int_hour < 10)
  int_hour = "0" + int_hour;
  if(int_minute < 10)
  int_minute = "0" + int_minute;
  if(int_second < 10)
  int_second = "0" + int_second;
  
  // 显示时间
  time_d.innerHTML = int_day;
  time_h.innerHTML = int_hour;
  time_m.innerHTML = int_minute;
  time_s.innerHTML = int_second;
  
  setTimeout("show_time()",1000);
 }else{
  time_d.innerHTML = time_d.innerHTML;
  time_h.innerHTML = time_h.innerHTML;
  time_m.innerHTML = time_m.innerHTML;
  time_s.innerHTML = time_s.innerHTML;
 
  // clearTimeout(timerID)
 }
};
</script>

以上这篇JS倒计时实例_天时分秒就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
React diff算法的实现示例
Apr 20 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
老生常谈javascript的面向对象思想
Aug 22 #Javascript
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
基于node.js之调试器详解
Aug 22 #Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 #Javascript
简单实现js上传文件功能
Aug 21 #Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 #Javascript
JavaScript实现简单图片轮播效果
Aug 21 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php while循环控制的简单实例
2016/05/30 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python3实现飞机大战
2020/11/29 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
《童年的发现》教学反思
2014/02/14 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
《观察物体》教学反思
2016/02/17 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL