纯CSS实现新年倒计时

onLoad: function (options) {
    var that = this
    //获取系统信息  
    wx.getSystemInfo({
      //获取系统信息成功，将系统窗口的宽高赋给页面的宽高  
      success: function (res) {
        that.width = res.windowWidth
        that.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 something
    this.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; */
}