网页做活动时，要用到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指定日期倒计时，日期过后显示过期内容，效果图：
效果演示地址：
http://tangjiusheng.com/jstx/121.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> |
除注明外的文章,均为来源:汤久生博客,转载请保留本文地址！