JS动态显示倒计时效果

 更新时间:2019年12月12日 09:17:36   作者:不要生病~  
这篇文章主要介绍了JS实现倒计时效果动态显示倒计时功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

1.页面布局

<h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>

2.js动态显示

getTime()获得设定的时期与1970年1月1日时间相差的毫秒数

1)获得插入数字的位置

var show=document.getElementById("show").getElementsByTagName("span");

2)声明现在的时间和未来的时间

var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);

3)获得两个时间差

var num=time.getTime()-timeing.getTime();

4)计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整

var day=parseInt(num/(24*60*60*1000));

5)获得去除天数后剩余的毫秒数

num=num%(24*60*60*1000);

6)计算小时和获得去除小时后剩余的毫秒数

var hour=parseInt(num/(60*60*1000));      
num=num%(60*60*1000);

7)计算分钟和获得去除分钟后剩余的毫秒数

var minute=parseInt(num/(60*1000));
num=num%(60*1000);

8)计算秒

var seconde=parseInt(num/1000);

9)页面上显示

       show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;

10)设置定时器每一秒获取一次新的时间

3.源码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 
 <h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>
 
 <script>
  var show=document.getElementById("show").getElementsByTagName("span");
  
  setInterval(function(){
  var timeing=new Date();
  var time=new Date(2020,0,1,0,0,0);
      var num=time.getTime()-timeing.getTime();
      var day=parseInt(num/(24*60*60*1000));  
      num=num%(24*60*60*1000);
      var hour=parseInt(num/(60*60*1000));      
      num=num%(60*60*1000);
      var minute=parseInt(num/(60*1000));
      num=num%(60*1000);
      var seconde=parseInt(num/1000);
       show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;
      },100)
 </script>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS动态显示倒计时效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • js导入导出excel(实例代码)

    js导入导出excel(实例代码)

    这篇文章主要是对js导入导出excel的实例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • js实现鼠标单击Tab表单切换效果

    js实现鼠标单击Tab表单切换效果

    这篇文章主要为大家详细介绍了js实现鼠标单击Tab表单切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 你需要了解的ES6语法大总结

    你需要了解的ES6语法大总结

    ECMAScript是浏览器脚本语言的规范,而我们熟知的js语言,如JavaScript则是规范的具体实现,下面这篇文章主要给大家介绍了关于ES6语法总结的相关资料,需要的朋友可以参考下
    2022-05-05
  • JS实现省市县三级下拉联动

    JS实现省市县三级下拉联动

    这篇文章主要为大家详细介绍了JS实现省市县三级下拉联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • Bootstrap Modal对话框如何在关闭时触发事件

    Bootstrap Modal对话框如何在关闭时触发事件

    这篇文章主要为大家详细介绍了Bootstrap Modal对话框如何在关闭时触发事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js实现简单的省市县三级联动效果实例

    js实现简单的省市县三级联动效果实例

    这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
    2016-02-02
  • js脚本获取webform服务器控件的方法

    js脚本获取webform服务器控件的方法

    asp.net webform中获取服务器控件,js脚本获取服务器控件需要使用ClientID,下面有个示例,大家可以参考下
    2014-05-05
  • js正则表达式之前瞻后顾与非捕获分组

    js正则表达式之前瞻后顾与非捕获分组

    话说自从学前端以来听到过多次这样的"笑话",程序员分为会正则的和不会正则的,可见正则的重要性,这篇文章主要给大家介绍了关于js正则表达式之前瞻后顾与非捕获分组的相关资料,需要的朋友可以参考下
    2021-10-10
  • Webpack中Source Map配置深入解析

    Webpack中Source Map配置深入解析

    这篇文章主要为大家介绍了Webpack中Source Map配置深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • js类型转换与引用类型详解(Boolean_Number_String)

    js类型转换与引用类型详解(Boolean_Number_String)

    本篇文章主要是对js中的类型转换与引用类型(Boolean_Number_String)进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03

最新评论