小程序版--2023兔年元宵节节倒计时

青空墨
577 阅读3分钟

在正文的第一句加入“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”

兔年春节已过，元宵节将至，愿每一个人所愿皆所得，“钱兔”似锦。

提前祝jym元宵节快乐~~

路过的xdm点个赞呗

话不多说，效果图走一波儿~

小程序版--2023兔年元宵节节倒计时.gif

首先是布局，这没什么好说的，懂得都懂。主要代码是倒计时和雪花飘。

不多说直接上代码

一、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

    });

},
avatar
文章
阅读
粉丝
相关推荐
元宵节你吃汤圆了嘛——css绘制一碗汤圆
137阅读
 · 
1点赞
元宵节到了，我们一起放烟花吧！
584阅读
 · 
2点赞
Shiro-00-shiro 概览
170阅读
 · 
0点赞
玩游戏抽PS5！掘金 1024 AI 防骗图鉴等你来玩！
18k阅读
 · 
18点赞
成为数据治理专家：行式存储VS列式存储
125阅读
 · 
0点赞
前端框架中那些或惊艳或坑爹的设计——React篇之Virtual DOM
175阅读
 · 
0点赞
使用 C++23 从零实现 RISC-V 模拟器（1）：最简CPU
754阅读
 · 
0点赞
突破编程_C++_基础教程（入门程序）
118阅读
 · 
0点赞
python-day02-html页面组成
502阅读
 · 
5点赞

友情链接：