简单倒计时效果

最新推荐文章于 2025-06-06 13:35:28 发布

原创最新推荐文章于 2025-06-06 13:35:28 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文展示了一个HTML页面，该页面使用JavaScript动态显示距离国庆节的剩余时间，并在假期开始时提示用户。

<!DOCTYPE html>
<head>
  <title>显示当前时间</title>
  <meta charset="utf-8">
  <style>
    *{margin:0;padding:0;}
    *{font-size:20px;}
    #show{
    	color:#669933;
    	font-size:20px;
    	width:400px;
    	height:100px;
    	text-align: center;
    	line-height: 100px; 
        margin:0 auto; 
        margin-top:20px; 
        border:1px solid #669933;        
    }
    #lefttime{
        color:#EE3A8C;
        font-size:24px;
    }
  </style>
  <script type="text/javascript">
  window.onload=function(){
    showtime();
  }
  function checkTime(i){
    if(i<10){
        i='0'+i;
    }
    return i;
  }
  function showtime(){
    var curtime=new Date();
    var endtime=new Date("2016/10/1,00:00:00");
    var lefttime=parseInt((endtime.getTime()-curtime.getTime())/1000);//getTime()显示毫秒数
    var day=parseInt(lefttime/(24*60*60));
    var hour=parseInt(lefttime/(60*60)%24);
    var minute=parseInt(lefttime/60%60);
    var second=parseInt(lefttime%60);
    minute=checkTime(minute);
    second=checkTime(second);
    document.getElementById('lefttime').innerHTML=day+'天'+hour+'小时'+minute+'分'+second+'秒';
    if(lefttime<=0){
        document.getElementById('show').innerHTML='七天小长假来啦！';
    }
    setTimeout(showtime,500);
  }
  </script>
</head>
<body>
<div class="content">
  <div id="show">距离国庆节还有<span id="lefttime">显示倒计时的位置</span></div>
</div>
</body>
</html>