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 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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 无极分类(递归)实现代码
2010/01/05 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php文件下载处理方法分析
2015/04/22 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
JS实现鼠标移动拖尾
2020/12/27 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python向图片里添加文字
2019/11/26 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python中有几个关键字
2020/06/04 Python
python unichr函数知识点总结
2020/12/16 Python
护理毕业生自荐信范文
2013/12/22 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
函授药学自我鉴定
2014/02/07 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
法律进企业活动方案
2014/03/04 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014年党员整改措施
2014/10/24 职场文书
公司开业主持词
2015/07/02 职场文书
小学教代会开幕词
2016/03/04 职场文书
检讨书范文
2019/04/16 职场文书
500字作文之周记
2019/12/13 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python