1 <template> 2 <div class="progressbar"> 3 <el-progress :text-inside="true" :soke-width="18" :percentage="percent" status="exception"></el-progress> 4 <p>{{year}}年已經過去了{{days}}天，{{percent}}%</p> 5 </div> 6 </template> 7 <script> 8 export default { 9 methods: { 10 isLeapYear () { 11 const year = new Date().getFullYear() 12 if (year % 400 === 0) { 13 return true 14 } else if (year % 4 === 0 && year % 100 !== 0) { 15 return true 16 } else { 17 return false 18 } 19 }, 20 getDayOfYear () { 21 return this.isLeapYear() ? 366 : 365 22 } 23 }, 24 computed: { 25 year () { 26 return new Date().getFullYear() 27 }, 28 days () { 29 let start = new Date() 30 start.setMonth(0) 31 start.setDate(1) 32 // start就是今年第一天 33 // 今天的時間戳 減去今年第一天的時間戳 34 let offset = new Date().getTime() - start.getTime() 35 return parseInt(offset / 1000 / 60 / 60 / 24) 1 36 }, 37 percent () { 38 return (this.days * 100 / this.getDayOfYear()).toFixed(1) 39 } 40 } 41 } 42 </script> 43 <style scoped> 44 .progressbar { 45 text-align: center; 46 margin-top:30px; 47 margin-bottom:40px; 48 width:100%; 49 } 50 .progressbar >>> .el-progress-bar { 51 width: 30%; 52 } 53 </style>

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的yearProgress.vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。