js实现倒计时效果

 

第一个效果

js实现倒计时（缺点：到达指定的时间会继续执行倒计时，时间显示的是负数）

<div class="nlpz_sjdjs">剩余：<span>00</span>:<span>00</span>:<span>00</span></div>

<script>
var starttime = new Date("2017-11-8 19:20:30");
    setInterval(function () {
var nowtime = new Date();
//alert(nowtime);
var time = starttime - nowtime;
//var day = parseInt(time / 1000 / 60 / 60 / 24);//天
var hour = parseInt(time / 1000 / 60 / 60 % 24);//小时
var minute = parseInt(time / 1000 / 60 % 60);//分钟
var seconds = parseInt(time / 1000 % 60);//秒
        $('.nlpz_sjdjs').html('剩余'+':'+'<span>'+hour+'</span>'+':'+'<span>'+minute+'</span>'+':'+'<span>'+seconds+'</span>');
    }, 1000);
</script>

效果图

 

 

 

第二个效果

js实现倒计时（到达指定的时间会返回一个事件，不会继续执行）

 <div class="nlpz_sjdjs">剩余：<span>00</span>:<span>00</span>:<span>00</span></div>


var starttime = new Date("2017-11-13 16:40:00");
    function tt(){
        var nowtime = new Date();
        //alert(nowtime);
        var time = starttime - nowtime;
        //var day = parseInt(time / 1000 / 60 / 60 / 24);//天
        var hour = parseInt(time / 1000 / 60 / 60 % 24);//小时
        var minute = parseInt(time / 1000 / 60 % 60);//分钟
        var seconds = parseInt(time / 1000 % 60);//秒

        if(hour<=0 && minute<=0 && seconds<=0){
clearInterval(sj);
            $('.nlpz_sjdjs').html("活动已结束");
        }else{
            $('.nlpz_sjdjs').html('剩余'+':'+'<span>'+hour+'</span>'+':'+'<span>'+minute+'</span>'+':'+'<span>'+seconds+'</span>');
        } 
    }
    var sj = setInterval(function () {tt();}, 1000);

效果图 （到达确定的时间会返回一个活动结束）