重慶潤雪科技有限公司（2008年至今），專注于網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、小程序開發(fā)、公眾號開發(fā)、app開發(fā)的技術(shù)服務(wù)商。
每一步都修改到滿意后在付款，用價(jià)格、質(zhì)量、服務(wù)說明一切。
日期：2021-04-21 10:30 瀏覽量：1884
在微信小程序制作中如何制作倒計(jì)時(shí)的功能，效果樣式圖如下，下面直接貼代碼
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;}
/* 評價(jià) */
.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();
/**
* 打卡計(jì)時(shí)
*/
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('開始時(shí)間：' + new Date() + ',結(jié)束時(shí)間：' + EndTime + ',總秒數(shù)：' + total_micro_second);
that.setData({
clock: dateformat(total_micro_second) //若已結(jié)束，此處輸出'0天0小時(shí)0分鐘0秒'
});
if (total_micro_second <= 0) {
that.setData({
clock: "已經(jīng)截止"
});
return;
}
setTimeout(function () {
total_micro_second -= 1000;
countdown(that);
}, 1000)
}
/**
* 日期格式化
*/
function dateformat(micro_second) {
// 總秒數(shù)
var second = Math.floor(micro_second / 1000);
// 天數(shù)
//var day = Math.floor(second / 3600 / 24);
// 小時(shí)
//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;//觸摸時(shí)的原點(diǎn)
var interval = "";
var flag_hd = true;
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
id: 0,
sellerInfo: {},
seller: [],
image_url: app.globalData.image_url,
image_url2: app.globalData.image_url2,
imageHeight: wx.getSystemInfoSync().windowHeight,
clock: '打卡計(jì)時(shí)',
end_time:'',
dkdate: 0,
userInfo: {},
flag: 0,
noteMaxLen: 200, // 最多放多少字
info: "",
noteNowLen: 0,//備注當(dāng)前字?jǐn)?shù)
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: "沒有滑動(dòng)",
},
/**
* 圖片自適應(yīng)高度
*/
imgHeight: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth; //獲取當(dāng)前屏幕的寬度
var imgh = e.detail.height;//圖片高度
var imgw = e.detail.width;//圖片寬度
var swiperH = winWid * imgh / imgw + "px" //等比設(shè)置swiper的高度。 即 屏幕寬度 / swiper高度 = 圖片寬度 / 圖片高度 ==》swiper高度 = 屏幕寬度 * 圖片高度 / 圖片寬度
this.setData({
imageHeight: swiperH//設(shè)置高度
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options,year, month, day, state) {
let that = this;
that.setData({
id: options.id
})
this.getSellerInfo();
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
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,//更具屏幕寬度變化自動(dòng)設(shè)置寬度
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);
}
});
},
// 提交清空當(dāng)前值
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'
})
}
});
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
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; //重新進(jìn)入頁面之后，可以再次執(zhí)行滑動(dòng)切換頁面代碼
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)
}
},
//獲取日歷相關(guān)參數(shù)
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;
//獲取現(xiàn)今年份
this.data.year = year;
//獲取現(xiàn)今月份
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; // 獲取觸摸時(shí)的原點(diǎn)
// 使用js計(jì)時(shí)器記錄時(shí)間
interval = setInterval(function () {
time++;
}, 100);
},
// 觸摸結(jié)束事件
touchEnd: function (e) {
var touchMove = e.changedTouches[0].pageX;
// 向左滑動(dòng)
if (touchMove - touchDot <= -20 && time < 10) {
//執(zhí)行切換頁面的方法
this.next()
}
// 向右滑動(dòng)
if (touchMove - touchDot >= 20 && time < 10) {
//執(zhí)行切換頁面的方法
this.last()
}
clearInterval(interval); // 清除setInterval
time = 0;
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
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: '確定要關(guān)閉當(dāng)前頁面嗎？關(guān)閉后系統(tǒng)將計(jì)算您的體驗(yàn)時(shí)間',
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', //返回商家頁面
})
}
});
}
}
}) */
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
},
// 監(jiān)聽字?jǐn)?shù)
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>
<!-- 合作商家結(jié)束 -->
<!--在線打卡開始 -->
<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;'>溫馨提示：一旦點(diǎn)擊打卡計(jì)時(shí)按鈕，請不要離開此頁面</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>
<!-- 日歷結(jié)束 -->
<view class='am-startdk' wx:if="{{dkdate != 0}}">開始打卡時(shí)間：{{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>
<!--在線打卡結(jié)束 -->
<view class='am-line'></view>
<!-- 評價(jià) -->
<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 != '點(diǎn)擊登錄'}}" >{{ userInfo.nickName }}</text>
</view>
<!--星星-->
<view class='am-description'>
<view class="star-pos" style="display:flex;flex-direction:row;">
<view class='am-fuwu'>服務(wù)：</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> -->
<!--發(fā)布按鈕 -->
<view class="btnSf">
<button bindtap="bindSubmit">提交</button>
</view>
</view>
</view>
潤雪科技 MENU
聯(lián)系我們 CONTACT
張經(jīng)理：18696556121 慕經(jīng)理：15213022835 鄒經(jīng)理：18819806503
辦公郵箱：741599086@qq.com
辦公地址：重慶市南岸區(qū)南坪亞太商谷7棟23-10、23-11
網(wǎng)站建設(shè)服務(wù)
掃一掃
