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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
js cavans实现静态滚动弹幕
May 21 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全排列递归算法代码
2012/10/09 PHP
php生成excel文件的简单方法
2014/02/08 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php 实现进制相互转换
2016/04/07 PHP
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
同意离婚答辩状
2015/05/22 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
深入浅析React中diff算法
2021/05/19 Javascript