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

阅读：2232 添加日期：2021/3/27 23:25:04 原文链接：https://www.toutiao.com/item/6434092672557777410/

网页做活动时，要用到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

完整代码如下：

<!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>

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