原创

JavaScript 实现各种时间倒计时效果

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在许多网站上可见限时抢购、倒计时等活动(如:双十一、双十二),下面为大家介绍几种常用的倒计时功能实现的 Html 页面。

1.倒计时时差,距离现在还有多少天,具体 Html 页面如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>倒计时时差 www.yoodb.com</title>
  <script type="text/javascript">
    window.onload = function(){
      deadTime();
    }
    function deadTime(){
      var nowTime = new Date();
      var finalTime = new Date("2015-12-12");
      var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
      var date = Math.ceil(lefttime);
      document.getElementById("time").innerHTML = date;
    }
  </script>
</head>
<body>
  <div >距离双十二还有:<span id ='time'></span>天</div>
</body>
</html>

页面显示结果==> 距离双十二还有:30天

2.限时抢购,计算相差的天、时、分、秒的方法,距离活动结束还剩天时分秒,具体 Html 页面如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>限时抢购 www.yoodb.com</title>
  <script type="text/javascript">
    function freshTime(){
var endtime=new Date("2015/12/12,12:00:00");
var nowtime = new Date();
var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
d = parseInt(lefttime/3600/24);
h = parseInt((lefttime/3600)%24);
m = parseInt((lefttime/60)%60);
s = parseInt(lefttime%60);
 
document.getElementById("time").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
if(lefttime<=0){
document.getElementById("time").innerHTML="团购已结束";
clearInterval(sh);
}
}
    
    var shv;
    shv = setInterval(FreshTime,1000);
  </script>
</head>
<body onload="freshTime()">
  <div class="time"> <span id="time"></span></div>
</body>
</html>

页面显示结果==> 距离活动结束还剩29天18小时48分26秒

~阅读全文-人机检测~

微信公众号“Java精选”(w_z90110),专注Java技术干货分享!让你从此路人变大神!回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。微信搜索小程序“Java精选面试题”,内涵3000+道Java面试题!

涵盖:互联网那些事、算法与数据结构、SpringMVC、Spring boot、Spring Cloud、ElasticSearch、Linux、Mysql、Oracle等

评论

分享:

支付宝

微信