原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

相关推荐

评论

分享:

支付宝

微信