mpvue读书--个人中心02_组件封装进度条-优快云博客

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/96779079

本文介绍了如何使用mpvue在小程序中创建一个进度条组件，展示当前年份及已过去天数的百分比。通过获取当前时间戳和年初时间戳，计算过去天数，并根据闰年条件确定总天数，最后呈现进度条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

进度条组件用于显示当前年份，计算距离年初多少天，所占的百分比
即需要：

当前时间
年份
当前时间时间戳
年初凌晨时间戳
今年总共多少天

在这里插入图片描述

进度条用到了微信原生组件
progress组件官方文档

在这里插入图片描述

在这里插入图片描述

new Date()可以获取当前时间，类型是时间对象格式
使用getFullYear()可以获取时间对象的年份

this.year = new Date( ).getFullYear( )

需要当前时间时间戳，需要年初时间戳

在这里插入图片描述
new Date()获取当前时间对象
getTime()获取时间对象的时间戳

在这里插入图片描述

new Date()获取当前时间对象
setMonth()更改时间对象的月份(0~11)
setDate()更改时间对象的日期(1~28/29/30/31)

时间戳相减
化单位，毫秒/1000，秒/60，分/60，时/24
当前时间时分秒比计算年初时间的时分秒要大
当前时分秒减年初时分秒并换算成天数，会多出一点小数的天数，如1月2日距离年初是1.xx天
使用parseInt()截去小数点后的多余天数

let offset = new Date().getTime() - thisYear.getTime()
return parseInt(offset / 1000 / 60 / 60 / 24)

需要计算出当前年份，一年总共有多少天
判断是否闰年

（1）能被4整除但不能被100整除
（2）能被400整除
在这里插入图片描述

在这里插入图片描述

// 过去天数百分比
percent () {
    // (过去天数/今年天数)*100 保留1位小数点
    return (this.days * 100 / this.getDayOfYear()).toFixed(1)
}

项目参考：慕课网
万事不顺，查文档
mpvue五分钟教程
 vue官方文档

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com