用代码实现倒计时活动效果

用代码实现倒计时活动效果

html

<p class="status-line" id="time-state">

	</p>

部分样式

status-line {
    width: 90%;
    background: rgba(255,255,255,.8);
    padding: .5rem 0;
    border-radius: .5rem;
    color: #6A7780;
    text-align: center;

    margin: 1rem auto;｝



调用

//当前时间
		ret.now="2018/03/01 20:59:50";
		//开始时间
		ret.start="2018/03/01 21:00:00";
		//结束时间

		ret.end="2018/03/01 21:00:10";



//倒计时

    	modelCommon.cut_down(ret.now,ret.start,ret.end);









//倒计时
 modelCommon.cut_down =  function (now,start,end) {
 	
    // 当前时间
    var nt=modelCommon.toData(now);
    var nowTime = nt.getTime();
    //开始时间
    //var start = "2018/02/01 21:00:00";
    var startTime = modelCommon.toData(start);
    // 结束时间
    //var end = "2018/02/01 23:59:00";
    var endTime = modelCommon.toData(end);
    // 相差的时间
    var t = 0;
    if (nowTime < startTime.getTime()) {
      status = '开始';
      t = startTime.getTime() - nowTime;
    } else {
      var status = '结束';
      t = endTime.getTime() - nowTime;
    }
    
    if (t < 0) {
    var fullDate = start.split(" ");
    var date = fullDate[0].split("/");
    var time = fullDate[1].split(":");
      var y =     parseInt(date[0]);
      var m = modelCommon.formatNumber(parseInt(date[1]) -1);
      var d = modelCommon.formatNumber(parseInt(date[2]));
      var h = modelCommon.formatNumber(parseInt(time[0]));
      var i = modelCommon.formatNumber(parseInt(time[1]));
      var s = modelCommon.formatNumber(parseInt(time[2]));
      var html = '<p><i class="iconfont icon-time fontcolor"></i> 投票于<span>' + m + '</span>月<span>' + d + '</span>日<span>' + h + '</span>时<span>' + i + '</span>分<span>' + s + '</span>秒<span style="background: none;">' + status + '</span></p>';
      $api.html($api.byId("time-state"), html);
      //$("#time-state").html(html);
      return false;
    }
    if (t > 0) {
      var d = modelCommon.formatNumber(t / 1000 / 60 / 60 / 24);
      var h = modelCommon.formatNumber(t / 1000 / 60 / 60 % 24);
      var i = modelCommon.formatNumber(t / 1000 / 60 % 60);
      var s = modelCommon.formatNumber(t / 1000 % 60);


      var html = '<p><i class="iconfont icon-time fontcolor"></i> 投票<span style="background: none;">' + status + '</span>倒计时<span>' + d + '</span>天<span>' + h + '</span>时<span>' + i + '</span>分<span>' + s + '</span>秒</p>';
      $api.html($api.byId("time-state"), html);
      //$("#time-state").html(html);
      //加一秒
      nt = new Date(nt.getTime() + 1000);
      now=modelCommon.formatDate(nt);
     
      setTimeout(function(){
      	modelCommon.cut_down(now,start,end)
      }, 1000);
    }
    if (t == 0) {
      status="未开始"
    
      var y = '-';
      var m = '-';
      var d = '-';
      var h = '-';
      var i = '-';
      var s = '-';
      var html = '<p><i class="iconfont icon-time fontcolor"></i> 活动已结束</p>';
      
      $api.html($api.byId("time-state"), html);
      //$("#time-state").html(html);
      return false;
    }
  }


//数字转换
 modelCommon.formatNumber =  function(num) {
 	if(num<10)
 	{
 		return "0"+parseInt(num);
 	}else{
 		return parseInt(num);
 	}
  }
  //日期格式化
   modelCommon.formatDate =  function(dt) {
   
    //"2018/02/01 21:00:00";
    var nian = dt.getFullYear();
var yue = dt.getMonth() + 1;
var day = dt.getDate();
var hour = dt.getHours();
var min = dt.getMinutes();
var miao = dt.getSeconds();
    return nian+"/"+yue+"/"+day+" "+hour+":"+min+":"+miao;
  }
  //日期格式化
   modelCommon.toData =  function(dt) {
    var fullDate = dt.split(" ");
    var date = fullDate[0].split("/");
    var time = fullDate[1].split(":");
    return new Date(parseInt(date[0]), parseInt(date[1]) -1, parseInt(date[2]), parseInt(time[0]), parseInt(time[1]), parseInt(time[2]));  
  }