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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
JavaScript 绘制饼图的示例
Feb 19 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php date()日期时间函数详解
2010/05/16 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Python中实现三目运算的方法
2015/06/21 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python实现文本文件合并
2015/12/29 Python
多个应用共存的Django配置方法
2018/05/30 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
什么是岗位职责
2013/11/12 职场文书
关于母亲节的感言
2014/02/04 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
食品安全工作方案
2014/05/07 职场文书
生产操作工岗位职责
2014/09/16 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
归元寺导游词
2015/02/06 职场文书
观后感格式
2015/06/19 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python