脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 动态倒计时

JS实现动态倒计时功能（天数、时、分、秒）

 更新时间：2019年12月12日 09:28:09   作者：吉帅振  
这篇文章主要介绍了JS实现动态倒计时功能详解（天数、时、分、秒）,需要的朋友可以参考下

写在前面：

实现倒计时功能首先是得到目标时间，然后用当前时间减去目标时间，最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算，可以采用object.getTime()方法转化成相同类型进行运算。

相关说明：

如果想要显示界面好看些，可以添加一下样式。

<script>
 function show(){
  //获取目的日期
  var myyear=document.getElementById("year").value;
  var mymonth=document.getElementById("month").value-1;
  var myday=document.getElementById("day").value;
  var myhour=document.getElementById("hour").value;
  var myminute=document.getElementById("minute").value;
  var mysecond=document.getElementById("second").value;
  var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
  // var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
  //获取当前时间
  var nowTime=Date.now();
  // var nowTime=new Date().getTime();
  //获取时间差
  var timediff=Math.round((time-nowTime)/1000);
  //获取还剩多少天
  var day=parseInt(timediff/3600/24);
  //获取还剩多少小时
  var hour=parseInt(timediff/3600%24);
  //获取还剩多少分钟
  var minute=parseInt(timediff/60%60);
  //获取还剩多少秒
  var second=timediff%60;
  //输出还剩多少时间
  document.getElementById("1").innerHTML=day;
  document.getElementById("2").innerHTML=hour;
  document.getElementById("3").innerHTML=minute;
  document.getElementById("4").innerHTML=second;
  setTimeout(show,1000);
  if(timediff==0){return;}
  }
 </script>

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 input{width:50px;height: 20px;border:1px solid black;}
 .time1 span{display:inline-block;width:40px;height: 20px;}
 </style>
</head>
<body>
 <form>目的日期：
 <input type="text" id="year"><span>年</span>
 <input type="text" id="month"><span>月</span>
 <input type="text" id="day"><span>日</span>
 <input type="text" id="hour"><span>时</span>
 <input type="text" id="minute"><span>分</span>
 <input type="text" id="second"><span>秒</span>
 <input type="button" value="确定" οnclick="show()">
 </form>
 <div class="time1">还剩时间：
 <span id="1"></span>天 
 <span id="2"></span>时
 <span id="3"></span>分
 <span id="4"></span>秒
 </div>

写在最后：倒计时的难点主要是时间格式和数字格式的转换，转换时除了object.getTime()方法还有Number(object)方法，大家可以尝试使用一下。

总结

以上所述是小编给大家介绍的JS实现动态倒计时功能（天数、时、分、秒），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 模拟抽奖

    模拟抽奖

    模拟抽奖...
    2006-08-08
  • 详解微信小程序官方人脸核身认证

    详解微信小程序官方人脸核身认证

    本文主要介绍了微信小程序官方人脸核身认证，感兴趣的同学，可以参考下，并且试验一下。
    2021-06-06
  • JavaScript数字数组的13个实用小技巧

    JavaScript数字数组的13个实用小技巧

    数组是JS最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率,这篇文章主要给大家分享介绍了关于JavaScript数字数组的13个实用小技巧,需要的朋友可以参考下
    2023-11-11
  • 前端错误日志上报的超详细解决方案

    前端错误日志上报的超详细解决方案

    这篇文章主要介绍了如何使用Node.js搭建一个简单的错误监控平台,用于收集和上报Vue.js项目的运行错误,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • layui获取多选框中的值方法

    layui获取多选框中的值方法

    今天小编就为大家分享一篇layui获取多选框中的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JS模拟面向对象全解（一、类型及传递）

    JS模拟面向对象全解（一、类型及传递）

    首先说明JS的特点。JS是弱类型的语言，像什么模板多态、又是类又是结构的说法，就完全不存在。
    2011-07-07
  • javascript IE中的DOM ready应用技巧

    javascript IE中的DOM ready应用技巧

    当我们想在页面加载之后执行某个函数，肯定会想到onload了 但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。
    2008-07-07
  • 使用JavaScript为一张图片设置备选路径的方法

    使用JavaScript为一张图片设置备选路径的方法

    在做网页开发的时候，有时候希望给图片设置一个备选路径，即，当src属性对应的主路径加载失败的时候，图片可以马上切换到备选路径，怎么实现呢?下面通过本文给大家分享JavaScript为一张图片设置备选路径的方法，一起看看吧
    2017-01-01
  • js替代copy(示例代码)

    js替代copy(示例代码)

    这篇文章主要是对js替代copy的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 很棒的Bootstrap选项卡切换效果

    很棒的Bootstrap选项卡切换效果

    这篇文章主要为大家分享了一款很棒的Bootstrap选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论