字体-字体+

纯js实现日期倒计时

2018-05-20 Javascript/Jquery 访问量 231


倒计时这个功能应用我们见的还是很多的,比如某网站的商品抢购活动。原理都是很简单,或者说是千篇一律的,今天我们就手写一下吧。


其实博主前面也讲到类似的倒计时的功能,有兴趣的伙伴可以去看看。


js/jquery实现倒时


CI框架设置404页面和倒时提示跳转


今天要说的这个是使用了一下定时器,setInterval,我们来看具体的代码。

<script>

    function Dawn_Countdown(){
		var date = new Date();  
	    var now = date.getTime();//毫秒单位

	    var time = 1526755380*1000; //指定一个时间缀,毫秒
	    var diff = time - now ;

	    var d,h,m,s; 
	    var time_str=''; 
	    if (diff>0) {  
	        d = Math.floor(diff/1000/60/60/24);  
	        h = Math.floor(diff/1000/60/60%24);  
	        m = Math.floor(diff/1000/60%60);  
	        s = Math.floor(diff/1000%60);  //分别是日月分秒
	        
	        if(d>0){
	        	time_str += d+'天';
	        }
	       	if(h>0){
	       		time_str += h+'时';
	       	}
	       	if(m>0){
	       		time_str += m+'分';
	       	}
	       	if(s>0){
	       		time_str += s+'秒';
	       	}
	        document.getElementById("show_time").innerText = time_str;	                      
	    }else{
	    	clearInterval(flag);
	    }
    }

    var flag = setInterval("Dawn_Countdown()",1000);

</script>


基本逻辑还是很简单的,请看效果如下:


js倒计时

标签:

原文来自:http://www.dawnfly.cn/article-1-393.html,转载请注明出处,谢谢【破晓博客复制链接地址