微信小程序制作中如何制作打卡倒計時功能-附代碼

在微信小程序制作中如何制作倒計時的功能，效果樣式圖如下，下面直接貼代碼

1、css代碼

.container {background-color:#F3F3F3;}

/*合作商家*/
.brand-info .name{ width: 100%;height: 350rpx;position: relative;}
.brand-info .img1{ position: absolute; top:0;left:0; width: 100%; height: 350rpx;}
.imgbg{width: 100%; height: 350rpx; top: 0; left: 0; position: absolute; background: #000; filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.brand-info .info-box{position: absolute;top:0;left:0;width: 100%;height: 350rpx;text-align: center; display: flex;justify-content: center; align-items: center;
}
.brand-info .info{ display: block;}
.brand-info .txt{display: block;  letter-spacing: 2px;color:#ffffff; font-weight:bold;}
.brand-info .line{ margin: 0 auto;margin-top: 16rpx;display:flex; flex-direction:row; }
.brand-info .line .num-people {padding-right:10px;color:#ffffff; font-weight:bold;}
.brand-info .line .sline {height:20px;width:3rpx;background-color: #ffffff;display: block;}
.brand-info .line .txt-dk {padding-left:10px;color:#ffffff; font-weight:bold;}

/* 在線打卡 */
.am-dakai {background-color:#ffffff;display: block;padding-bottom:10px;}
.am-dakai .am-dk {border-bottom:#efefef 1px solid;font-size:.7rem;padding-left:10px;padding-bottom:10px;padding-top:10px;}
.am-dakai .am-dk .am-ico{width:20px;height:20px; vertical-align: bottom;padding-right:10rpx;}
.am-dakai .am-startdk {border-bottom:#efefef 1px solid; font-size:.7rem;color:#ff5600;padding-left:8px; height:40px; line-height:40px;}
.am-dakai .am-d1 {margin-top:10px; text-align: center}
.am-dakai .am-kq {padding-top:10px; width:100%; }
.am-dakai .am-kq .am-name {width:60%;height:270rpx; position: relative;}
.am-dakai .am-kq .am-name .img {position: absolute;width:270rpx;height:270rpx;}
.am-dakai .am-kq .am-name .info-box{
    position: absolute; top:15px; left:68px; width: 100%;  height: 200rpx;text-align: center;display: flex; justify-content: center; align-items: center;
}
.am-dakai .am-kq .am-name .info{ display: block; text-align: center;}
.am-dakai .am-kq .am-name .txt{ display: block; height: 37.5rpx;font-size: 37.5rpx;color: #fff;margin-left:10px;}

.am-line {width:100%;background:#F3F3F3;height:10px;}

.dk-1 {padding-right:10rpx; font-size:.8rem;}
.dk-2 {color:#ff0000;font-size:.8rem;}

/* 評價 */
.am-pingjia {background-color:#ffffff;}
.am-pingjia .am-left {display: flex;padding: 20rpx 0;   align-items: center;width:100%;}
.userinfo-avatar {width: 100rpx;height: 100rpx;margin: 20rpx; border-radius: 50%;}
.userinfo-nickname {color: #333;}
.am-description{display:flex; flex-direction:row; padding-bottom:10px;}
.am-fuwu {padding-left:15px; vertical-align: bototm;}
.stars{
    background:url("http://login.pink333.com/uploads/20180911/c52b67b195b552bc1a14ed74dc9d4448.png");width: 50rpx;height: 50rpx;background-size: 50rpx 50rpx; margin-left: 30rpx;transition: 600ms;
}
.on{
    background:url("http://login.pink333.com/uploads/20180911/50a17380c22133d165a2c1f04ee09aba.png");
    width: 50rpx; height: 50rpx;background-size: 50rpx 50rpx; transition: 1s; transform: scale(1,1)
}
.weui-textarea {padding:5px;}
.weui-cells_after-title{ width: 92%; margin:0 auto; border:1px solid #ddd;}
.weui-textarea-counter {float:right;padding-right:10px;padding-bottom:5px;}
.weui-cell__bd {height:7em;}
.btnSf{ width: 80%;margin:30rpx auto; }
.btnSf button{ background: #F43272;color: #fff;}
.btnSf button:active{ background: #5BC2C6; color: #fff;}


/* 日歷 */
.box1 .dateBox{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
margin-top: 20px;
font-size: 40rpx;
}

.box1{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}

.box1>view{
height: 30px;
line-height: 30px;
text-align: center;
font-size: 34rpx;
}

.dateOn{
border-radius: 50%;
background-color: hotpink;
color: #fff;
}
.ball {
box-shadow:2px 2px 10px #AAA;
border-radius: 20px;
position: absolute;
}
.font-color{
color:#a9a9a9;
}

2、js代碼

const api = require('../../config/api.js');
const util = require('../../utils/util.js');
const user = require('../../services/user.js');
const app = getApp();

/**
 * 打卡計時
 */
function countdown(that) {
  var enddate = that.data.end_time;
  var newTimeStr = enddate.replace(/-/g, "/");
  var EndTime = new Date(newTimeStr).getTime();

  var startdate = new Date();
  var start_value = startdate.getFullYear() + '-' + (startdate.getMonth() + 1) + '-' + startdate.getDate() + ' ' + startdate.getHours() + ':' + startdate.getMinutes() + ':' + startdate.getSeconds(); 
  var startformat = start_value.replace(/-/g, "/");
  var NowTime = new Date(startformat).getTime() || [];
  var total_micro_second = EndTime - NowTime;
  if (total_micro_second < 0) {
    total_micro_second = 1;  
  }
  console.log('開始時間：' + new Date() + ',結束時間：' + EndTime + ',總秒數：' + total_micro_second);
  that.setData({
    clock: dateformat(total_micro_second)   //若已結束，此處輸出'0天0小時0分鐘0秒'
  });
  if (total_micro_second <= 0) {
    that.setData({
      clock: "已經截止"
    });
    return;
  }
  setTimeout(function () {
    total_micro_second -= 1000;
    countdown(that);
  }, 1000)

} 

/**
 * 日期格式化
 */
function dateformat(micro_second) {   
  // 總秒數   
  var second = Math.floor(micro_second / 1000); 
  // 天數  
  //var day = Math.floor(second / 3600 / 24); 
   // 小時   
  //var hr = Math.floor(second / 3600 % 24); 
  var hr = Math.floor(second / 3600);
  // 分鐘   
  var min = Math.floor((second - hr * 3600) / 60); 
  // 秒   
  var sec = Math.floor(second - hr * 3600 - min * 60); 
  return  min + ":" + sec; 
 } 

var time = 0;
var touchDot = 0;//觸摸時的原點
var interval = "";
var flag_hd = true;

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    id: 0,
    sellerInfo: {},
    seller: [],
    image_url: app.globalData.image_url,
    image_url2: app.globalData.image_url2,
    imageHeight: wx.getSystemInfoSync().windowHeight,
    clock: '打卡計時',
    end_time:'',
    dkdate: 0,
    userInfo: {},
    flag: 0,
    noteMaxLen: 200, // 最多放多少字
    info: "",
    noteNowLen: 0,//備注當前字數
    total:0,
    punchId:0,
    userTotal: 0,
    overTotal: 0,
    p_id: 0,

    font: "",
    arr: [],
    sysW: null,
    lastDay: null,
    firstDay: null,
    weekArr: ['日', '一', '二', '三', '四', '五', '六'],
    year: null,
    day: null,
    ballTop: 0,
    ballLeft: 0,
    screenHeight: 0,
    screenWidth: 0,
    text: "沒有滑動",
  },

  /**
   * 圖片自適應高度
   */
  imgHeight: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth; //獲取當前屏幕的寬度  
    var imgh = e.detail.height;//圖片高度   
    var imgw = e.detail.width;//圖片寬度   
    var swiperH = winWid * imgh / imgw + "px" //等比設置swiper的高度。 即 屏幕寬度 / swiper高度 = 圖片寬度 / 圖片高度  ==》swiper高度 = 屏幕寬度 * 圖片高度 / 圖片寬度   
    this.setData({
      imageHeight: swiperH//設置高度  
    })
  }, 

 
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options,year, month, day, state) {
    let that = this;
    that.setData({
      id: options.id
    })
    this.getSellerInfo();
    // 頁面初始化 options為頁面跳轉所帶來的參數
    this.setData({
      userInfo: app.globalData.userInfo,
    });

    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
          font: ""
        });
      }
    });

    this.dataTime(year, month, day, state);
    var two;
    var res = wx.getSystemInfoSync();
    var date = ""
    if (this.data.getWeek == 0) {
      date = this.data.getDate
    }
    else if (this.data.getDate <= this.data.getWeek) {
      two = 1
      date = 1
    }
    else {
      date = this.data.getDate - Number(this.data.getWeek)
    }
    var num = Number(this.data.getDate + (6 - this.data.getWeek));
    if (num > this.data.lastDay) {
      num = this.data.lastDay
    }
    var cha = Number(this.data.lastDay - date)
    var endDay;
    this.data.arr = []
    var startDay = date;
    if (two == 1) {
      this.setData({
        font: 1
      })
      var last = new Date(this.data.year, this.data.month - 1, 1).getDay()
      var start = new Date(this.data.year, this.data.month - 1, 0).getDate()
      var now = start - last + 1
      var newdate = new Date(this.data.year, this.data.month - 1, now)
      startDay = newdate.getDate()
      for (var i = startDay; i <= start; i++) {
        this.data.arr.push(i);
      }
    }
    for (var i = date; i <= num; i++) {
      this.data.arr.push(i);
      endDay = i;
    }
    if (cha < 6) {
      this.setData({
        font: 2
      })
      for (var i = 1; i <= (6 - cha); i++) {
        this.data.arr.push(i);
        endDay = i;
      }
    }
    that.setData({
      sysW: res.windowHeight / 12,//更具屏幕寬度變化自動設置寬度
      marLet: that.data.firstDay,
      arr: that.data.arr,
      year: that.data.year,
      getDate: that.data.getDate,
      month: that.data.month,
      endDay: endDay,
      startDay: startDay
    });
  },

  /**
     * 基本信息
     */
  getSellerInfo: function () {
    var that = this;
    let user = wx.getStorageSync('userInfo');
    util.request(api.sellerDetail, { id: that.data.id, m_id: user.m_id}, 'POST').then(res => {
      console.log(res);
      if (res.errCode == 200) {
        wx.setNavigationBarTitle({
          title: res.errMsg.sellerDetail['s_name']
        })
        that.setData({
          seller: res.errMsg.sellerDetail,
          total:res.errMsg.total,
          userTotal: res.errMsg.userTotal,
          overTotal: res.errMsg.overTotal
        });
      } else {
        if (res.errCode == 4003) {
          wx.showModal({
            title: '友情提醒',
            content: res.errMsg,
            showCancel: false,
            success: function(rs) {
              if (rs.confirm) {
                wx.navigateTo({
                  url: '/pages/ucenter/edituser/edituser',
                })
              }
            }
          })
        } else {
          wx.showModal({
            title: '友情提醒',
            content: res.errMsg,
            showCancel: false
          })
        }
      }
    });
  },

  /**
   * 開始打卡
   */
  startDaKai: function () {
    let that = this;
    let user = wx.getStorageSync('userInfo');
    util.request(api.addPunch, { s_id: that.data.id, m_id: user.m_id, m_username: user.nickName }, 'POST').then(res => {
     console.log(res);
      if (res.errCode != 200) { 
       // util.showErrorToast(res.errMsg);
       wx.showModal({
         title: '友情提醒',
         content: res.errMsg,
         showCancel:false
       })
      } else {
        that.setData({
          end_time: res.data.date,
          dkdate: res.data.startdate,
       /*   total: res.data.total, */
          punchId: res.errMsg
        });
        countdown(that);
      }
    });
  },

  // 提交清空當前值
  bindSubmit: function () {
    var that = this;
    let user = wx.getStorageSync('userInfo');
    util.request(api.addCommentary, {p_id: that.data.punchId, s_id: that.data.id, m_id: user.m_id, m_username: user.nickName, t_flag: that.data.flag, t_mark: that.data.info}, 'POST').then(res => {
      if (res.errCode == 200) {
        wx.showToast({
          title: res.errMsg,
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.errMsg,
          icon: 'success',
          image: '/images/icon_error.png'
        })
      }
    });
  },
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    let userInfo = wx.getStorageSync('userInfo');
    let token = wx.getStorageSync('token');

    // 頁面顯示
    if (userInfo && token) {
      app.globalData.userInfo = userInfo;
      app.globalData.token = token;
    }
    this.setData({
      userInfo: app.globalData.userInfo,
    });

    //日歷顯示
    flag_hd = true; //重新進入頁面之后，可以再次執行滑動切換頁面代碼
    clearInterval(interval); // 清除setInterval
    time = 0;
  },

  test: function (event) {
    let pageX = event.touches[0].pageX;
    let pageY = event.touches[0].pageY;
    if (pageX < 30 || pageY < 30)
      return;
    if (pageX > this.data.screenWidth - 30)
      return;
    if (pageY > this.data.screenHeight - 30)
      return;
    this.setData({
      ballTop: event.touches[0].pageY - 30,
      ballLeft: event.touches[0].pageX - 30,
    });
  },
  next: function (res) {
    if (this.data.endDay < this.data.getDate) {
      this.onLoad(res, this.data.year, this.data.month, this.data.endDay, 2)
    }
    else if (this.data.lastDay == this.data.getDate && this.data.endDay != null) {
      this.onLoad(res, this.data.year, Number(this.data.month), 1, 2)
    }
    else if (this.data.lastDay != this.data.endDay) {
      this.onLoad(res, this.data.year, Number(this.data.month - 1), Number(this.data.endDay + 1), 2)
    }
    else {
      this.data.endDay = 0
      this.onLoad(res, this.data.year, Number(this.data.month), 1, 2)
    }
  },
  last: function (res) {
    if (this.data.startDay < 7) {
      this.onLoad(res, this.data.year, this.data.month - 1, this.data.startDay - 1)
    }
    else if (this.data.startDay > this.data.endDay && this.data.font == 1) {
      this.onLoad(res, this.data.year, this.data.month - 2, this.data.startDay)
    }
    else {
      this.onLoad(res, this.data.year, this.data.month - 1, this.data.startDay - 7)
    }
  },

  //獲取日歷相關參數
  dataTime: function (year, month, day, state) {

    var last = this.data.lastDay
    var date = new Date(year, month, day);
    if (year == null) {
      date = new Date();
    }
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDate();
    var months = date.getMonth() + 1;

    //獲取現今年份
    this.data.year = year;

    //獲取現今月份
    this.data.month = months;
    //獲取今日日期
    this.data.getDate = date.getDate();
    //最后一天是幾號
    var d = new Date(year, months, 0);

    this.data.lastDay = d.getDate();
    //第一天星期幾

    let firstDay
    if (state == 1) {
      if (d.getDate() == date.getDate()) {
        if (this.data.startDay == 1) {
          firstDay = new Date(year, Number(month), Number(new Date(year, month - 1, 0).getDate() - 6));
        }
        else if (this.data.startDay <= 7) {
          firstDay = new Date(year, Number(month), Number(new Date(year, month - 1, 0).getDate() - 8));
        }
        else {
          firstDay = new Date(year, Number(month), Number(new Date(year, month - 1, 0).getDate() - 7));
        }
      }
      else if (this.data.startDay >= 6) {
        if (month == 11 && this.data.endDay > this.data.startDay && this.data.startDay != 16 && this.data.startDay != 9) {
          if (this.data.endDay <= 23) {
            firstDay = new Date(year, Number(month + 1), day);
          }
          else {
            firstDay = new Date(year, Number(month), day);
          }
        }
        else if (this.data.startDay == 8) {
          firstDay = new Date(year, Number(month), day - 4);
        }
        else {
          if (this.data.startDay == 6 && this.data.year != 2018 && this.data.month != 4) {
            this.data.month = Number(this.data.month + 1)
            firstDay = new Date(year, Number(month + 1), day);
          }
          else if (this.data.year == 2018 && this.data.month == 4) {
            firstDay = new Date(year, Number(month), day);
          }
          else {
            firstDay = new Date(year, Number(month - 1), day);
          }
        }
      }
      else {
        if (this.data.startDay == 4 && month == 2) {
          firstDay = new Date(year, Number(month - 1), Number(new Date(year, month - 1, 0).getDate() - day + 1));
        }
        else if (month == 1) {

          firstDay = new Date(year, Number(month), Number(new Date(year, month - 1, 0).getDate() - day + 2));
        }
      }
    }
    else if (state == 2) {
      if (this.data.endDay == last && last != null) {
        firstDay = new Date(year, month, 1);
      }
      else {
        firstDay = new Date(year, Number(month), Number(1 + this.data.endDay));
      }
    }
    else {
      firstDay = new Date(year, month, day);
    }
    this.data.firstDay = firstDay.getDay();
    this.setData({
      getWeek: date.getDay()
    })
  },
  touchStart: function (e) {
    touchDot = e.touches[0].pageX; // 獲取觸摸時的原點
    // 使用js計時器記錄時間
    interval = setInterval(function () {
      time++;
    }, 100);
  },
  // 觸摸結束事件
  touchEnd: function (e) {
    var touchMove = e.changedTouches[0].pageX;
    // 向左滑動
    if (touchMove - touchDot <= -20 && time < 10) {
      //執行切換頁面的方法
      this.next()
    }
    // 向右滑動
    if (touchMove - touchDot >= 20 && time < 10) {
      //執行切換頁面的方法
      this.last()
    }
    clearInterval(interval); // 清除setInterval
    time = 0;
  },
  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    let that = this;
    if (!(getCurrentPages().length == '-1')) {
      util.request(api.updateEndDate, { p_id: that.data.punchId }, 'POST').then(res => {
        console.log(res);
        if (res.errCode == 200) {
          wx.navigateTo({
            url: '/pages/punch/punch', //返回商家頁面
          })
        }
      });
    }
    
   /* wx.showModal({
      title: '提示',
      content: '確定要關閉當前頁面嗎？關閉后系統將計算您的體驗時間',
      success: function(res) {
        console.log(res);
        if (res.confirm) {
          util.request(api.updateEndDate, { p_id: that.data.punchId }, 'POST').then(res => {
            console.log(res);
            if (res.errCode == 200) {
              wx.navigateTo({
                url: '/pages/punch/punch', //返回商家頁面
              })
            }
          });
        }
      }
    }) */
   
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () { 
  },
  // 監聽字數
  bindTextAreaChange: function (e) {
    var that = this
    var value = e.detail.value,
      len = parseInt(value.length);
    if (len > that.data.noteMaxLen)
      return;
    that.setData({ info: value, noteNowLen: len })
  },
  changeColor1: function () {
    var that = this;
    that.setData({
      flag: 1
    });
  },
  changeColor2: function () {
    var that = this;
    that.setData({
      flag: 2
    });
  },
  changeColor3: function () {
    var that = this;
    that.setData({
      flag: 3
    });
  },
  changeColor4: function () {
    var that = this;
    that.setData({
      flag: 4
    });
  },
  changeColor5: function () {
    var that = this;
    that.setData({
      flag: 5
    });
  }

})

3、wxml代碼

<view class='container'>
<!-- 合作商家開始 
      <view class="brand-info">
        <view class="name">
            <image class="img1" src="{{image_url}}{{seller.s_img}}"   background-size="cover"></image>
            <view class="imgbg"></view>
            <view class="info-box">
                <view class="info">
                    <text class="txt">{{seller.s_name}}</text>
                     <view class="line">
                    
                     </view>
                </view>
            </view>
        </view>
    </view>
  <view class='clear'></view>
   <!-- 合作商家結束  -->

   <!--在線打卡開始 -->
   <view class='am-dakai'>
     <view class='am-dk'>
     <image class='am-ico' src='{{image_url2}}20180913/584d02e58f45445061a582e4520e9c23.png'></image>
     <text class='dk-1'>已打卡{{total}}次 還剩<text class='dk-2'>{{overTotal}}</text>次</text>
     </view>
     <view class='am-dk' style='color:#FE527B;font-weight:bold;font-size:.8rem;'>溫馨提示：一旦點擊打卡計時按鈕，請不要離開此頁面</view>
     <!-- 日歷開始 -->

<view bindtouchstart="touchStart" bindtouchend="touchEnd">

  <view class='box1' style='width: {{ sysW * 7 }}px'>
    <block wx:for='{{ weekArr }}' wx:key=''>
     <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{ item }}</view>
     </block>
     <block wx:for='{{ arr }}'  wx:key=''>
     <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class='{{ item == getDate ? "dateOn" : ""}} {{font==1?item>7?"font-color":"":font==2?item<7?"font-color":"":"" }}'>{{ item }}</view>
     </block>
  </view>
</view>


     <!-- 日歷結束 -->

     <view class='am-startdk' wx:if="{{dkdate != 0}}">開始打卡時間：{{dkdate}}</view>
     <view class='am-d1'>
       <view class='am-kq' bindtap='startDaKai'>
         <view class='am-name'>
          <image class="img" src="{{image_url2}}20180911/0b6ed9cb264f1ac3a773820e6c6385c4.png" background-size="cover"></image>
           <view class="info-box">
             <view class="info">
              <text class='txt'>{{clock}}</text>
             </view>
           </view>
         </view>
       </view>
     </view>
   </view>
   <!--在線打卡結束 -->
   <view class='am-line'></view>

   <!-- 評價 -->
   <view class='am-pingjia'>
     <view class='am-left'  >
         <image wx:if="{{userInfo && userInfo.avatarUrl}}" class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"></image>
             <text class="userinfo-nickname" wx:if="{{userInfo.nickName != '點擊登錄'}}" >{{ userInfo.nickName }}</text>
     </view>
     <!--星星-->
     <view class='am-description'>
        <view class="star-pos" style="display:flex;flex-direction:row;">
            <view class='am-fuwu'>服務：</view>
            <view class="stars  {{flag>=1? 'on': ''}}" bindtap="changeColor1"></view>
            <view class="stars  {{flag>=2? 'on': ''}}" bindtap="changeColor2"></view>
            <view class="stars  {{flag>=3? 'on': ''}}" bindtap="changeColor3"></view>
            <view class="stars  {{flag>=4? 'on': ''}}" bindtap="changeColor4"></view>
            <view class="stars  {{flag>=5? 'on': ''}}" bindtap="changeColor5"></view>
        </view>
     </view>

     <!--文本域  -->
 <!--  <view class="weui-cells_after-title">
    <view class="weui-cell">
      <view class="weui-cell__bd">
        <textarea class="weui-textarea" bindinput="bindTextAreaChange" placeholder="我要提出建議..." style="height: 5em" 
        value="{{info}}" maxlength="{{noteMaxLen}}" focus />
        <view class="weui-textarea-counter">{{noteNowLen}}/{{noteMaxLen}}</view>
      </view>
    </view>
  </view> -->
<!--發布按鈕  -->
  <view class="btnSf">
    <button bindtap="bindSubmit">提交</button>
  </view>

   </view>
</view>