5分钟学会JS实现倒计时

                                                        js实现倒计时

 

一、前言

       利用 js 简单实现倒计时 功能，分享给大家。

       效果图如下：

                                        

 

二、 js实现倒计时代码

        <!-- ↓↓↓↓↓ html代码 ↓↓↓↓↓ -->

        <div class="y_Count_down">
            <span>距离五一假期还有</span><br />
            <font class="countTime"></font><br />
            <span>猿医生！</span>
        </div>    

        <!-- ↑↑↑↑↑ html代码 ↑↑↑↑↑ -->    


        <!-- ↓↓↓↓↓  js代码  ↓↓↓↓↓ -->

        // 结束时间
	var endtime = '2019-05-01 00:00:00'; 
	endtime = endtime.replace(/-/g,"/"); // 解决浏览器兼容问题
	endtime = new Date(endtime);
	setInterval(function () {

      	    // 开始时间
      	    var currenttime = new Date(); 
		
      	    // 倒计时时间 = 结束时间 - 开始时间
      	    var result = endtime.getTime() - currenttime.getTime(); 
		
	    // 定义变量 d,h,m,s保存倒计时的时间  
            var d,h,m,s;  
            if (result > 0) {  
                d = Math.floor(result/1000/60/60/24);  
                h = Math.floor(result/1000/60/60%24);  
                m = Math.floor(result/1000/60%60);  
                s = Math.floor(result/1000%60);                     
            } else { 
	        $(".countTime").text(""); // 置空
	        return;
	    }
		
	    // 倒计时赋值  
      	    $(".countTime").text(d+"天"+h+"时"+m+"分"+s+"秒");
	
	},1000);

        <!-- ↑↑↑↑↑  js代码  ↑↑↑↑↑ -->

 

                       Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。