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 相关文章推荐
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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 编写的日历
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
PHP 错误处理机制
2015/07/06 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
php解决安全问题的方法实例
2019/09/19 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Apache部署Django项目图文详解
2019/07/30 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
.NET面试问题集
2015/12/08 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
实习教师自我鉴定
2013/12/09 职场文书
将相和教学反思
2014/02/04 职场文书
手机银行营销方案
2014/03/14 职场文书
母校寄语大全
2014/04/10 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
新闻通讯稿范文
2015/07/22 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python