jQuery 实现倒计时

jQuery 实现倒计时

效果样式

css样式

<style type="text/css">
		.timer{
		     position: relative;
		     height:60px;
		 }
		 .timer img{
		     width:100%;
		     position: absolute;
		     top: -37px;
		     left:0;
		 }
		 .avtivecon{
		     color: #fff;
		     font-weight: bold;
		     font-size:1.1em;
		     position: absolute;
		     top:0em;
		     right:100px;
		 }
		 .timedata{
		     position: absolute;
		     top:1.5em;
		     right: 77px;
		     color: #fff;
		     font-weight: bold;
		     font-size:1.1em;
		 }
</style>

html

	<div class="timer text-center">
          <div class="avtivecon"> 距结束还剩</div>
          <div class="timedata">
              <span id="_d"></span>
              <span id="_h"></span>
              <span id="_m"></span>
              <span id="_s"></span> 
          </div>
      </div>

js

<script type="text/javascript">
	countTime();
    function countTime() {  
        //获取当前时间  
        var date = new Date();  
        var now = date.getTime();  
        //设置截止时间  
        var str="2024/4/29 00:00:00";
        var endDate = new Date(str); 
        var end = endDate.getTime();  
        
        //时间差  
        var leftTime = end-now; 
        // console.log(leftTime);
        // 634671375  86400000
        //定义变量 d,h,m,s保存倒计时的时间  
        var d,h,m,s;  
        if (leftTime>=0) {  
            d = Math.floor(leftTime/1000/60/60/24);  
            h = Math.floor(leftTime/1000/60/60%24);  
            m = Math.floor(leftTime/1000/60%60);  
            s = Math.floor(leftTime/1000%60); 
             //将倒计时赋值到div中  
            document.getElementById("_d").innerHTML = d+"天";  
            document.getElementById("_h").innerHTML = h+"时";  
            document.getElementById("_m").innerHTML = m+"分";  
            document.getElementById("_s").innerHTML = s+"秒";  
            //递归每秒调用countTime方法，显示动态时间效果  
            setTimeout(countTime,1000);                    
        } else{
            $(".timer").addClass("hidden");
        }
    }
</script>