js倒计时简单实现代码

 更新时间:2016年08月11日 09:01:52   作者:jineslee  
这篇文章主要为大家详细介绍了js倒计时简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

倒计时: 

1.设置一个有效的结束日期 

2.计算剩余时间 

3.将时间转换成可用的格式 

4.输出时钟数据作为一个可重用的对象 

5.在页面上显示时钟,并在它到达0时停止

html

<div id="clock">
  <span id="days"></span>天
  <span id="hours"></span>时

  <span id="minutes"></span>分

  <span id="seconds"></span>秒

</div>


js代码 

<script><br>/*计算剩余时间*/
  function getTimeReamin(endtime){
   //剩余的秒数
    var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000;
    var days=Math.floor(remainSec/(3600*24));
    var hours=Math.floor(remainSec/3600%24);
    var minutes=Math.floor(remainSec/60%60);
    var seconds=Math.floor(remainSec%60);
    return{"remainSec":remainSec,
     "days":days,
     "hours":hours,
     "minutes":minutes,
     "seconds":seconds
    }
  } 
var endtime="2016/10/10";
var clock=document.getElementById("clock");
//设置定时器
var timeid=setInterval(function () {
  var t=getTimeReamin(endtime);
  //判断时间格式
  days= t.days>=0&& t.days<10?"0"+t.days:t.days;
  hours= t.hours>=0&& t.hours<10?"0"+t.hours:t.hours;
  minutes=t.minutes>=0&&t.minutes<10?"0"+t.minutes:t.minutes;
  seconds=t.seconds>=0&&t.seconds<10?"0"+t.seconds:t.seconds;
  //设置时间
  document.getElementById("days").innerText= days;
  document.getElementById("hours").innerText= hours;
  document.getElementById("minutes").innerText= minutes;
  document.getElementById("seconds").innerText=seconds;
  //清除定时器
  if(t.remainSec<=0){
    clearInterval(timeid);
  }
});
<script> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • webpack 中 chunks配置和使用详解

    webpack 中 chunks配置和使用详解

    chunks 的概念与 Webpack 的代码分割(Code Splitting)功能密切相关,通过 optimization.splitChunks 配置项可以实现对代码块的分类和优化,下面给大家介绍webpack 中 chunks配置和使用详解,感兴趣的朋友一起看看吧
    2025-04-04
  • 微信小程序实现多选删除列表数据功能示例

    微信小程序实现多选删除列表数据功能示例

    这篇文章主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript箭头函数中的this详解

    JavaScript箭头函数中的this详解

    这篇文章主要介绍了JavaScript箭头函数中的this详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • js canvas实现适用于移动端的百分比仪表盘dashboard

    js canvas实现适用于移动端的百分比仪表盘dashboard

    这篇文章主要为大家详细介绍了js canvas实现适用于移动端的百分比仪表盘dashboard,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript模拟实现Promise功能的示例代码

    JavaScript模拟实现Promise功能的示例代码

    这篇文章主要为大家详细介绍了JavaScript如何模拟实现Promise功能,文中的示例代码讲解详细,对我们学习JavaScript有一定的帮助,需要的可以参考一下
    2022-12-12
  • js实现input的赋值小结

    js实现input的赋值小结

    这篇文章主要介绍了js实现input的赋值问题小结,在实际的开发中,为了页面的美观,可能用到一些框架,比如EasyUI框架,文中介绍了easyui的input框赋值代码,感兴趣的朋友一起看看吧
    2023-12-12
  • 如何正确使用javascript 来进行我们的程序开发

    如何正确使用javascript 来进行我们的程序开发

    Javascript 正确使用方法,下面为大家介绍的是一个关于如何正确使用javascript 来进行我们的程序开发,需要的朋友可以参考下
    2014-06-06
  • JavaScript实现Tab点击切换

    JavaScript实现Tab点击切换

    这篇文章主要为大家详细介绍了JavaScript实现Tab点击切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    这篇文章主要介绍了JavaScript实现下拉列表框数据增加、删除、上下排序的方法,涉及javascript针对页面下拉列表框元素的添加、删除及移动的相关技巧,具有一定参考借鉴,需要的朋友可以参考下
    2015-08-08
  • js下将字符串当函数执行的方法

    js下将字符串当函数执行的方法

    js下将字符串当函数执行的方法,需要的朋友可以参考下。
    2011-07-07

最新评论