在正文的第一句加入“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”
兔年春节已过，元宵节将至，愿每一个人所愿皆所得，“钱兔”似锦。
提前祝jym元宵节快乐~~
路过的xdm点个赞呗
话不多说，效果图走一波儿~
首先是布局，这没什么好说的，懂得都懂。主要代码是倒计时和雪花飘。
不多说直接上代码
一、wxml
<view class="container">
<image class="bg-title" mode="widthFix" src="../../resources/img/tndj.png"></image>
<image class="bg-top" mode="widthFix" src="../../resources/img/bg-top.png"></image>
<image class="bg-bottom" mode="widthFix" src="../../resources/img/bg-bottom.png"></image>
<image class="bg-wrap" mode="widthFix" src="../../resources/img/bg.jpg"></image>
<image animation="{{animation[index]}}" class="snow" data-index="{{index}}" src="../../resources/icon/snow.png" style="left:{{snows[index]}}rpx" wx:for="{{snows}}" wx:key="index"></image>
<view class="title"> 2023年元宵节倒计时 </view>
<view class="desc"> 2023年02月05日 </view>
<view class="desc"> 星期日 癸卯年 (兔年) 农历正月十五 </view>
<view class="desc"> 目前距离2023年元宵节还有 </view>
<view class="timer-wrap">
<view class="time-item">{{left_time_list[0]}}</view>
<view class="time-unit"> 天 </view>
<view class="time-item">{{left_time_list[1]}}</view>
<view class="time-unit"> 时 </view>
<view class="time-item">{{left_time_list[2]}}</view>
<view class="time-unit"> 分 </view>
<view class="time-item">{{left_time_list[3]}}</view>
<view class="time-unit"> 秒 </view>
</view>
<view catchtap="jumpToOverMissionList" class="share_btn">点我绘新年 </view>
</view>
复制代码二、wxss
.container {
height: 100%;
padding-top: 300rpx;
position: relative;
width: 100%;
}
.bg-title {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 100rpx;
width: 500rpx;
z-index: 1000;
}
.bg-wrap {
z-index: -1;
}
.bg-top,.bg-wrap {
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.bg-top {
z-index: 0;
}
.bg-bottom {
bottom: 0;
left: 0;
width: 100%;
z-index: 0;
}
.bg-bottom,.snow {
position: absolute;
}
.snow {
height: 27rpx;
top: -100rpx;
width: fit-content;
width: 30rpx;
z-index: 11;
}
.snow:nth-child(2n+2) {
height: 33rpx;
width: 35rpx;
}
.time-box {
background: hsla(0,0%,100%,0);
border-radius: 20rpx;
color: #eaa81b;
font-size: 35rpx;
margin: 20rpx;
padding: 20px;
}
.flex-row {
align-items: center;
display: flex;
flex-direction: row;
}
.time-item {
background: linear-gradient(45deg,#f7d674,#e2a625);
border-radius: 4rpx;
color: #a01f1f;
font-size: 45rpx;
height: 60rpx;
line-height: 60rpx;
margin: 0 20rpx;
text-align: center;
width: 60rpx;
}
.time-unit {
color: #f5df63;
font-size: 28rpx;
font-weight: 700;
line-height: 60rpx;
}
.share_btn {
background: linear-gradient(180deg,#ebc862,#f8bc39);
border-radius: 44rpx;
bottom: 250rpx;
color: #fff;
font-size: 32rpx;
height: 88rpx;
left: 0;
line-height: 88rpx;
margin: auto;
position: absolute;
right: 0;
text-align: center;
width: 600rpx;
}
.title {
color: #fce2ac;
font-size: 56rpx;
height: 100rpx;
line-height: 100rpx;
margin-bottom: 100rpx;
padding-top: 100rpx;
position: relative;
text-align: center;
width: 100%;
z-index: 1;
}
.timer-wrap {
display: flex;
justify-content: center;
margin-top: 30rpx;
width: 100%;
}
.desc {
color: #fce2ac;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
width: 100%;
}
复制代码三、js
var t = require("../../@babel/runtime/helpers/defineProperty"),
a = 0;
Page({
data: {
nickName: "",
avatarUrl: "",
isCanDraw: !1,
snows: [],
animation: [],
dateTime: "",
left_time: "",
timer: "",
left_time_list: [],
left_time_list_date: []
},
getUserInfo: function(t) {
"getUserInfo:ok" === t.detail.errMsg && (wx.setStorageSync("avatarUrl", t.detail.userInfo.avatarUrl),
wx.setStorageSync("nickName", t.detail.userInfo.nickName),
this.setData({
nickName: t.detail.userInfo.nickName,
avatarUrl: t.detail.userInfo.avatarUrl,
isCanDraw: !this.data.isCanDraw
}));
},
onLoad: function(t) {
this.setData({
nickName: wx.getStorageSync("nickName") || "",
avatarUrl: wx.getStorageSync("avatarUrl") || ""
});
},
onShow: function() {
this.initSnow(),
this.data.snows = [],
this.data.animation = [];
for (var t = 50; t--;) this.data.snows.push(Math.floor(700 * Math.random()));
this.setData({
snows: this.data.snows
}),
this.getLeftTime("2023/02/05 00:00:00");
},
onHide: function() {
clearTimeout(this.data.dateTime),
this.setData({
snows: [],
animation: []
});
},
onUnload: function() {
this.setData({
nickName: wx.getStorageSync("nickName") || "",
avatarUrl: wx.getStorageSync("avatarUrl") || ""
}), clearTimeout(this.data.dateTime), this.setData({
snows: [],
animation: []
}), this.data.timer && (console.log("销毁计时器"), clearInterval(this.data.timer));
},
initSnow: function() {
setTimeout(function() {
var e, i = wx.createAnimation({});
i.translateY(804).opacity(1).step({
duration: 4e3
}), i.translateY(0).opacity(1).step({
duration: 0
}), this.setData((t(e = {}, "snows[" + a + "]", Math.floor(700 * Math.random())),
t(e, "animation[" + a + "]", i.export()), e)), 50 == ++a && (a = 0);
}.bind(this), 500);
var e = setTimeout(function() {
this.initSnow();
}.bind(this), 100);
this.setData({
dateTime: e
});
},
getLeftTime: function(t) {
var a = this,
e = this.getTimestap(t);
this.initDate(e),
this.data.timer = setInterval(function() {
0 == e-- ? (a.setData({
left_time: 0,
left_time_list: a.formatSeconds(0)
}), clearInterval(a.data.timer)) : a.initDate(e);
}, 1e3);
},
initDate: function(t) {
var a = this.formatSeconds(t),
e = this.formatDate(JSON.stringify(a));
this.setData({
left_time: t,
left_time_list: a,
left_time_list_date: e
});
},
getTimestap: function(t) {
var a = parseInt(new Date().getTime() / 1e3),
e = parseInt(new Date(t.replace(/-/g, "/")).getTime() / 1e3);
return e <= a ? 0 : e - a;
},
formatSeconds: function(t) {
var a = [],
e = parseInt(t / 86400),
i = parseInt(t % 86400 / 3600),
n = parseInt(t % 86400 % 3600 / 60),
s = parseInt(t % 86400 % 3600 % 60);
return a[0] = e > 0 ? this.addZero(e) : this.addZero(0), a[1] = i > 0 ? this.addZero(i) : this.addZero(0),
a[2] = n > 0 ? this.addZero(n) : this.addZero(0), a[3] = s > 0 ? this.addZero(s) : this.addZero(0),
a;
},
formatDate: function(t) {
for (var a = JSON.parse(t), e = 0; e < a.length; e++) a[e] = a[e].toString().split("");
return a;
},
addZero: function(t) {
return t < 10 ? "0" + t : t;
},
handleClose: function() {
this.setData({
isCanDraw: !this.data.isCanDraw
});
},
jumpToOverMissionList: function() {
wx.navigateTo({
url: "../index/index"
});
}
});
复制代码- 倒计时
// 这是传入需要倒计时的日期
this.getLeftTime("2023/02/05 00:00:00");
复制代码// 获取倒计时的方法
getLeftTime: function(t) {
// setInterval函数内没有this指向，需要在外层赋值后使用
var a = this,
// 获取当前时间戳
e = this.getTimestap(t);
this.initDate(e),
// 设置定时器，1e3=1秒，每秒更新一次，
// 当e倒计时时间戳不为0时，执行a.initDate(e)方法；
// 为0时执行a.setData({ left_time: 0, left_time_list: a.formatSeconds(0) }), clearInterval(a.data.timer))
this.data.timer = setInterval(function() {
0 == e-- ? (a.setData({
left_time: 0,
left_time_list: a.formatSeconds(0)
}), clearInterval(a.data.timer)) : a.initDate(e);
}, 1e3);
},
复制代码// 对日期进行格式化
formatSeconds: function(t) {
var a = [],
// 倒计时天数
e = parseInt(t / 86400),
// 倒计时小时
i = parseInt(t % 86400 / 3600),
// 倒计时分
n = parseInt(t % 86400 % 3600 / 60),
// 倒计时秒
s = parseInt(t % 86400 % 3600 % 60);
return a[0] = e > 0 ? this.addZero(e) : this.addZero(0),
a[1] = i > 0 ? this.addZero(i) : this.addZero(0),
a[2] = n > 0 ? this.addZero(n) : this.addZero(0),
a[3] = s > 0 ? this.addZero(s) : this.addZero(0),
a;
},
复制代码// 对小于10的数添0
addZero: function(t) {
return t < 10 ? "0" + t : t;
},
复制代码- 雪花飘
this.initSnow(),
this.data.snows = [],
this.data.animation = [];
// 循环创建50片雪花，值作为左边距数值，如值为168，则该雪花初始左边距为168rpx
for (var t = 50; t--;) this.data.snows.push(Math.floor(700 * Math.random()));
// 赋值
this.setData({
snows: this.data.snows
})
复制代码// 初始化雪花飘
initSnow: function() {
setTimeout(function() {
// 创建一个动画实例 [animation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html)。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
// 具体实现看微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
var e, i = wx.createAnimation({});
// Animation.translateY(number translation):对 Y 轴平移
// Animation.opacity(number value): 设置透明度
// Animation.step(Object object): 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
i.translateY(804).opacity(1).step({
duration: 4e3 // 4秒
}), i.translateY(0).opacity(1).step({
duration: 0
}),
this.setData((t(e = {}, "snows[" + a + "]", Math.floor(700 * Math.random())),
t(e, "animation[" + a + "]", i.export()), e)), 50 == ++a && (a = 0);
}.bind(this), 500);
var e = setTimeout(function() {
this.initSnow();
}.bind(this), 100);
this.setData({
dateTime: e
});
},
复制代码