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插件开发注意事项小结
Jun 04 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
JS如何监听div的resize事件详解
Dec 03 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/01/07 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python程序退出方式小结
2017/12/09 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
妇联主席先进事迹
2014/05/18 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
党章培训心得体会
2014/09/04 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
学子宴致辞大全
2015/07/27 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript