js指定日期倒计时，日期过后显示过期内容

分类：js特效时间：2017-06-03

网页做活动时，要用到js倒计时,那么倒计时日期过后显示什么，怎么显示？用if判断现在的日期是否大于指定倒计时日期（时间戳），大于就显示活动过期的文字内容，原理很简单，具体请看js代码吧。

document.writeln("<div id=\'div\' style=\'color:#fff;font-size:36px;background:#6a1e8b;line-height:98px;text-align:center;\'></div>");
var countdown = function ()
{
    var now = new Date;   //获取系统时间的时间戳
    if (now >= ending)
    {
        var obj = document.getElementById("div");
        obj.style.height= "100px";
        var year=now.getYear()-100;
        var month=now.getMonth()+1;
        var day=now.getDate();
        clearTimeout(this.timeout);
        div.innerHTML = "亲，今天是：20"+year+"年"+month+"月"+day+"日，这个活动过期了哦！";  //过期后显示的文字内容
        return;
    }
    div.innerHTML = "";
    this.timeout = setTimeout (countdown, 1000);
}
onload = countdown;

js指定日期倒计时，日期过后显示过期内容，效果图：

<!Doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>js指定日期倒计时，日期过后显示过期内容</title>
</head>
<style type="text/css">
       *{margin:0;padding:0;}
       .box{width:1000px;margin:100px auto;text-align:center;}
</style>
<script type="text/javascript">
    var ending = new Date ("2017/06/03");  //此日期的00:00:00开始过期
</script>
<body>
   <div class="box">
  <script type="text/javascript">
      document.writeln("<div id=\'div\' style=\'color:#fff;font-size:36px;background:#6a1e8b;line-height:98px;text-align:center;\'></div>");
var countdown = function ()
{
    var now = new Date;   //获取系统时间的时间戳
    if (now >= ending)
    {
        var obj = document.getElementById("div");
        obj.style.height= "100px";
        var year=now.getYear()-100;
        var month=now.getMonth()+1;
        var day=now.getDate();
        clearTimeout(this.timeout);
        div.innerHTML = "亲，今天是：20"+year+"年"+month+"月"+day+"日，这个活动过期了哦！";  //过期后显示的文字内容
        return;
    }
    div.innerHTML = "";
    this.timeout = setTimeout (countdown, 1000);
}
onload = countdown;
</script>
   </div>
</body>
</html>

点击演示特效下载

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！

关注下头条号后，请私信将免费分享给你一份web前端资料！
立即关注

大家都在看