【butterfly】新年倒计时卡片

效果展示

倒计时大于一天：显示天数；
倒计时小于一天：显示时分秒进行倒计时；
如果已经过年了：显示新年快乐；

添加侧边栏

在[Blogroot]\source\_data\widget.yml文件添加如下代码：

# top: 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)
# bottom: 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)
top:
  - class_name:
    id_name: newYear
    name:
    icon:
    order: 1
    html: '<div id="newYear-main"><div class="mask"></div>
      <p class="title"></p>
      <div class="newYear-time"></div>
      <p class="today" style="text-align: right;"></p>
      </div>'

添加css

在[Blogroot]\themes\butterfly\source\css\_custom\文件夹下新建new-year.styl文件并添加如下代码：

/* 新年侧边栏 */
#newYear
  color white
  padding 0 !important
  p, h3
    font-weight normal
    color inherit
    margin 0
  .item-headline
    display none
  &-main
    min-height 160px
    padding 1rem
    position relative
    border-radius 12px
    background-image url('https://img.cdn.tencent-qq.cn/Yize/2023/01/930b82371b2ea955.webp')
    background-size cover
    background-position center
    *
      position relative
      line-height 1.3
    .newYear-time
      font-weight bold
      text-align center
    .time, .happyNewYear
      font-size 3.5rem
      margin 1rem 0
      display block
    .day
      font-size 5rem
      .unit
        font-size 1rem
    .mask
      position absolute
      left 0
      top 0
      height 100%
      width 100%
      background-color rgba(0, 0, 0, .1)

引入JQuery和元宝库

在[Blogroot]\_config.butterfly.yml文件的inject下的bottom里添加如下代码：

# jq
- <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
# 元宝
- <script src="https://cdn.wpon.cn/2022-sucai/Gold-ingot.js"></script>

添加js

在自定义js文件中加入以下代码：

var newYear = () => {
  if (!document.querySelector('#newYear')) return;
  // 新年时间戳 and 星期对象
  let newYear = new Date('2023-01-22 00:00:00').getTime() / 1000,
    week = { 0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六' }

  time();

  // 补零函数
  function nol(h) { return h > 9 ? h : '0' + h; };

  function time() {
    // 现在 时间对象
    let now = new Date();

    // 右下角 今天
    document.querySelector('#newYear .today').innerHTML = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + week[now.getDay()]

    // 现在与新年相差秒数
    let second = newYear - Math.round(now.getTime() / 1000);

    // 小于0则表示已经过年
    if (second < 0) {
      document.querySelector('#newYear .title').innerHTML = 'Happy New Year!';
      document.querySelector('#newYear .newYear-time').innerHTML = '<span class="happyNewYear">新年快乐</p>';
    } else {
      // 大于0则还未过年
      document.querySelector('#newYear .title').innerHTML = '距离2023年春节：'

      // 大于一天则直接渲染天数
      if (second > 86400) {
        document.querySelector('#newYear .newYear-time').innerHTML = `<span class="day">${Math.ceil(second / 86400)}<span class="unit">天</span></span>`
      } else {
        // 小于一天则使用时分秒计时。
        let h = nol(parseInt(second / 3600));
        second %= 3600;
        let m = nol(parseInt(second / 60));
        second %= 60;
        let s = nol(second);
        document.querySelector('#newYear .newYear-time').innerHTML = `<span class="time">${h}:${m}:${s}</span></span>`;
        // 计时
        newYearTimer = setTimeout(time, 1000);
      }
    }
  }

  // 元宝飘落
  jQuery(document).ready(function ($) {
    $('#newYear').wpSuperSnow({
      flakes: ['https://img.cdn.tencent-qq.cn/Yize/2023/01/5258db16c205b467.webp', 'https://img.cdn.tencent-qq.cn/Yize/2023/01/acaf8ad0e1df4bf0.webp', 'https://img.cdn.tencent-qq.cn/Yize/2023/01/0d3789f6ba30bbc2.webp'],
      totalFlakes: '100',
      zIndex: '999999',
      maxSize: '30',
      maxDuration: '20',
      useFlakeTrans: false
    });
  });
}
newYear();