JS

最新推荐文章于 2023-04-05 17:00:42 发布

妖々晶

最新推荐文章于 2023-04-05 17:00:42 发布

阅读量118

点赞数

原文链接：http://www.softwhy.com/article-4732-1.html

版权

倒计时

倒计时效果在很多网站中都有应用，用途也比较广泛，就算在后端开发中这个也是一个比较中的实现效果。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>dao</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  list-style:none;
}
body{
  font-size:18px;
  text-align:center;
}
.time{
  height:30px;
  padding:200px;
}
</style>
<script type="text/javascript">
function GetRTime(){
  var EndTime= new Date('2022/12/20 00:00:00');
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  var d=0;
  var h=0;
  var m=0;
  var s=0;
  if(t>=0){
    d=Math.floor(t/1000/60/60/24);
    h=Math.floor(t/1000/60/60%24);
    m=Math.floor(t/1000/60%60);
    s=Math.floor(t/1000%60);
  }
  else{
    clearTimeout(timer);
    return;
  }
  document.getElementById("t_d").innerHTML = d + "天";
  document.getElementById("t_h").innerHTML = h + "时";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
  var timer=setTimeout(GetRTime,1000);
}
window.onload=function(){
  GetRTime()
}
</script>
</head>
<body>
<div class="time"> 
  <span id="t_d">00天</span> 
  <span id="t_h">00时</span> 
  <span id="t_m">00分</span> 
  <span id="t_s">00秒</span> 
</div>
</body>
</html>