File tree Expand file tree Collapse file tree 1 file changed +33
-34
lines changed Expand file tree Collapse file tree 1 file changed +33
-34
lines changed Original file line number Diff line number Diff line change 17
17
</div >
18
18
</template >
19
19
<script >
20
- export default {
20
+ export default {
21
21
22
- ready () {
23
- window .setInterval (() => {
24
- this .now = Math .trunc ((new Date ()).getTime () / 1000 );
25
- },1000 );
26
- },
22
+ props: {
23
+ date: null ,
24
+ },
27
25
28
- props : {
29
- date : {
30
- type : Number ,
31
- coerce : str => Math . trunc ( Date . parse (str) / 1000 )
32
- }
33
- },
26
+ data : function () {
27
+ return {
28
+ now : Math . trunc (( new Date ()). getTime () / 1000 ) ,
29
+ event : this . date ,
30
+ }
31
+ },
34
32
35
- data () {
36
- return {
37
- now: Math .trunc ((new Date ()).getTime () / 1000 )
38
- }
39
- },
33
+ computed: {
34
+ // using computed to take care of the calculation per the doc
35
+ calculatedDate : function () {
36
+ return this .event = Math .trunc (Date .parse (this .event ) / 1000 );
37
+ },
38
+ seconds : function () {
39
+ return (this .calculatedDate - this .now ) % 60 ;
40
+ },
40
41
41
- computed: {
42
- seconds () {
43
- return (this .date - this .now ) % 60 ;
44
- },
42
+ minutes : function () {
43
+ return Math .trunc ((this .calculatedDate - this .now ) / 60 ) % 60 ;
44
+ },
45
45
46
- minutes () {
47
- return Math .trunc ((this .date - this .now ) / 60 ) % 60 ;
48
- },
46
+ hours : function () {
47
+ return Math .trunc ((this .calculatedDate - this .now ) / 60 / 60 ) % 24 ;
48
+ },
49
49
50
- hours () {
51
- return Math .trunc ((this .date - this .now ) / 60 / 60 ) % 24 ;
50
+ days : function () {
51
+ return Math .trunc ((this .calculatedDate - this .now ) / 60 / 60 / 24 );
52
+ }
52
53
},
53
-
54
- days () {
55
- return Math .trunc ((this .date - this .now ) / 60 / 60 / 24 );
54
+
55
+ // new ready function
56
+ mounted : function () {
57
+ window .setInterval (() => {
58
+ this .now = Math .trunc ((new Date ()).getTime () / 1000 );
59
+ },1000 );
56
60
}
57
61
}
58
- }
59
-
60
62
</script >
61
63
<style >
62
64
@import url (https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100 );
63
-
64
65
.block {
65
66
display : flex ;
66
67
flex-direction : column ;
67
68
margin : 20px ;
68
69
}
69
-
70
70
.text {
71
71
color : #1abc9c ;
72
72
font-size : 40px ;
@@ -76,7 +76,6 @@ export default {
76
76
margin-bottom : 10px ;
77
77
text-align : center ;
78
78
}
79
-
80
79
.digit {
81
80
color : #ecf0f1 ;
82
81
font-size : 150px ;
You can’t perform that action at this time.
0 commit comments