富贵资源网 Design By www.hznty.com

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动态显示倒计时效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。