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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
实例详解带参数的 npm script
May 28 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 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 调用远程url的六种方法小结
2009/11/02 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python分析作业提交情况
2017/11/22 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
出生医学证明样本
2014/01/17 职场文书
高中体育教学反思
2014/01/24 职场文书
技术总监管理职责范本
2014/03/06 职场文书
红头文件任命书范本
2014/06/05 职场文书
安全标语口号
2014/06/09 职场文书