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 相关文章推荐
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
继续学习javascript闭包
Dec 03 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
Vue 表情包输入组件的实现代码
Jan 21 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学习资料汇总与网址
2007/03/16 PHP
浅谈php提交form表单
2015/07/01 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Javascript注入技巧
2007/06/22 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python Canny边缘检测算法的实现
2020/04/24 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
电子商务专业学生职业生涯规划
2014/03/07 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python