onLoad: function (options) {var that = this//獲取系統信息 wx.getSystemInfo({//獲取系統信息成功，將系統窗口的寬高賦給頁面的寬高 success: function (res) {that.width = res.windowWidththat.height = res.windowHeight// 這里的單位是PX，實際的手機屏幕有一個Dpr，這里選擇iphone，默認Dpr是2}})let date = util.formatDate(new Date());this.checkDate(date, '2023-01-01')let week = util.formatWeek(new Date())this.setData({date: date,week: week});this.downTime()},downTime(time) {var timerclock = setInterval(() => {var clock = new Date();var nh = clock.getHours();var nm = clock.getMinutes();var ns = clock.getSeconds();nh < 10 ? nh = ('0' + String(nh)) : '';nm < 10 ? nm = ('0' + String(nm)) : '';ns < 10 ? ns = ('0' + String(ns)) : '';console.log(nh + ':' + nm + ':' + ns)this.setData({time: nh + ':' + nm + ':' + ns})}, 1000);},checkDate(startTime, endTime) {//日期格式化var start_date = new Date(startTime.replace(/-/g, "/"));var end_date = new Date(endTime.replace(/-/g, "/"));//轉成毫秒數，兩個日期相減var ms = end_date.getTime() - start_date.getTime();//轉換成天數var day = parseInt(ms / (1000 * 60 * 60 * 24));//do somethingthis.setData({day: day})},

<view class="container"><canvas canvas-id="clock" /></view> <view class="date"><view> {{date}}</view><view class="week">{{week}}</view><view class="day">新年倒計時{{day}}<text style="font-size: 20rpx;">天</text></view><view class="day">春節倒計時{{day+21}}<text style="font-size: 20rpx;">天</text></view><view class="time">{{time}}</view> </view> .container {height: 100%;width: 100%;background-color: #118fff;background-image: linear-gradient(#fff,#fea000, #118fff); }canvas {height: 100%;width: 100%; }page {width: 100%;height: 100%; }.date {position: absolute;top: 2%;left: 35%;font-size: 50rpx;color: red;display: flex;justify-content: center;flex-direction: column;text-align: center;font-weight: bold; } .week{font-size: 40rpx;margin: 10rpx 0; } .day{font-size: 30rpx;margin-bottom: 10rpx; } .word {font-size: 36rpx; } .time{/* color: #dd6311; */ }

總結

以上是生活随笔為你收集整理的纯CSS实现新年倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。