微信小程序二十四节气倒计时功能代码实现

以下是基于微信小程序框架的二十四节气倒计时功能代码实现示例:

  1. 在.json文件中添加以下代码:
{
  "navigationBarTitleText": "节气倒计时",
  "usingComponents": {}
}

  1. 在.wxml文件中添加以下代码:
<view class="container">
  <view class="countdown">
    <text class="countdown-title">{{countdownTitle}}</text>
    <text class="countdown-timer">{{countdownTimer}}</text>
  </view>
</view>

  1. 在.wxss文件中添加以下代码:
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #666;
}

.countdown-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.countdown-timer {
  font-size: 36px;
  font-weight: bold;
  color: #f00;
}

  1. 在.js文件中添加以下代码:
Page({
  data: {
    countdownTitle: '', // 倒计时标题
    countdownTimer: '' // 倒计时显示
  },

  onLoad: function () {
    this.countdown()
  },

  // 倒计时函数
  countdown: function () {
    let now = new Date()
    let year = now.getFullYear()
    let solarTerms = this.getSolarTerms(year)
    for (let i = 0; i < solarTerms.length; i++) {
      let solarTermDate = solarTerms[i].date
      // 如果当前日期小于节气日期,则计算倒计时
      if (now < solarTermDate) {
        let countdownTime = Math.round((solarTermDate - now) / 1000) // 倒计时的总秒数
        let countdownDay = Math.floor(countdownTime / (24 * 60 * 60)) // 倒计时的天数
        let countdownHour = Math.floor((countdownTime % (24 * 60 * 60)) / (60 * 60)) // 倒计时的小时数
        let countdownMinute = Math.floor((countdownTime % (60 * 60)) / 60) // 倒计时的分钟数
        let countdownSecond = Math.floor(countdownTime % 60) // 倒计时的秒数
        let countdownTimer = countdownDay + '天' + countdownHour + '小时' + countdownMinute + '分' + countdownSecond + '秒' // 倒计时显示
        let countdownTitle = solarTerms[i].name // 倒计时标题
        this.setData({
          countdownTitle: countdownTitle,
          countdownTimer: countdownTimer
        })
        setTimeout(() => {
          this.countdown()
        }, 1000)
        break
      }
    }
  },

  // 获取24节气日期
  getSolarTerms: function (year) {
    let solarTerms = []
    for (let i = 0; i < 24; i++) {
      let solarTermDate = this.getSolarTermDate(year, i * 15)
      let solarTermName = this.getSolarTermName(i)
      solarTerms.push({
        date: solarTermDate,
        name: solarTermName
      })
    }
    return solarTerms
  },

  // 获取某年某节气日期
  getSolarTermDate: function (year, index) {
    let yearStart = new Date(new Date(year, 0, 1, 0, 0, 0))
    let termBase = new Date(yearStart.getTime() + index * 24 * 60 * 60 * 1000 * 365 / 24)
    let termDate = this.getTermDate(year, termBase)
    return termDate
  },

  // 获取节气名称
  getSolarTermName: function (index) {
    let solarTerms = ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至', '小寒', '大寒']
    return solarTerms[index]
  },

  // 计算某年的节气日期
  getTermDate: function (year, termBase) {
    let termInfo = [
      0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149,
      195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350,
      375494, 397447, 419210, 440795, 462224, 483532, 504758
    ]
    let termMonth = [
      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12
    ]
    let solarTerm = [
      '', '小寒', '大寒', '立春', '雨水', '惊蛰', '春分', '清明', '谷雨',
      '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露',
      '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至'
    ]
    let tmp1 = new Date(
      31556925974.7 * (year - 1900) + termInfo[termMonth[termBase.getMonth()]] * 60000 + 1.0 * termBase.getDate()
    )
    let tmp2 = tmp1.toLocaleDateString()
    let termDay = Number(tmp2.split(/.*\//)[1])
    return new Date(year, termMonth[termBase.getMonth()], termDay, 0, 0, 0)
  }
})

以上代码实现了二十四节气倒计时的功能,感谢阅读。

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值