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 以对象为索引的关联数组
May 19 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
浅析Jquery操作select
Dec 13 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
vue实现购物车选择功能
Jan 10 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 文件上传系统手记
2009/10/26 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
一套C#面试题
2013/10/09 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
毕业学生推荐信
2013/12/01 职场文书
九年级政治教学反思
2014/02/06 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python