以下是基于微信小程序框架的二十四节气倒计时功能代码实现示例:
- 在.json文件中添加以下代码:
{
"navigationBarTitleText": "节气倒计时",
"usingComponents": {}
}
- 在.wxml文件中添加以下代码:
<view class="container">
<view class="countdown">
<text class="countdown-title">{{countdownTitle}}</text>
<text class="countdown-timer">{{countdownTimer}}</text>
</view>
</view>
- 在.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;
}
- 在.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)
}
})
以上代码实现了二十四节气倒计时的功能,感谢阅读。