yearProgress.vue 

 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>

 

posted @ 2018-08-30 10:57  叶子玉  阅读(387)  评论(0)  编辑  收藏  举报