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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
angular.js分页代码的实例
Jul 27 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
老生常谈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开发文件系统实例讲解
2006/10/09 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
Node对CommonJS的模块规范
2019/11/06 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python传递参数方式小结
2015/04/17 Python
python实现的文件同步服务器实例
2015/06/02 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
财务部岗位职责
2013/11/19 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
民主评议党员工作总结
2014/10/20 职场文书
大足石刻导游词
2015/02/02 职场文书