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代码
Mar 05 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
javascript if条件判断方法小结
May 17 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
javascript数据类型详解
Feb 07 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
js实现双色球效果
Aug 02 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
JavaScript修改css样式style
2008/04/15 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
详解小白之KMP算法及python实现
2019/04/04 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python dict的常用方法示例代码
2020/06/23 Python
使用Python pip怎么升级pip
2020/08/11 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
投资入股协议书
2016/03/22 职场文书
通知怎么写?
2019/04/17 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技