106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
|
<div class="container zd-row flexcol alignend">
|
|
<div class="date-wraper">{{hours}}:{{minutes}}:{{seconds}}</div>
|
|
<div class="time-wraper">{{date}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'jxTime',
|
|
data () {
|
|
return {
|
|
timer: null,
|
|
time: '',
|
|
hours: '',
|
|
minutes: '',
|
|
seconds: '',
|
|
date: '',
|
|
week: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
this.updateTime()
|
|
this.timer = window.setInterval(this.updateTime, 1000)
|
|
},
|
|
methods: {
|
|
updateTime () {
|
|
let cd = new Date()
|
|
let year = cd.getFullYear()
|
|
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
|
|
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
|
|
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
|
|
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
|
|
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
|
|
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
let myddy = new Date().getDay()
|
|
let week = weekday[myddy]
|
|
this.time = `${hh}:${mm}:${ss}`
|
|
this.hours = `${hh}`
|
|
this.minutes = `${mm}`
|
|
this.seconds = `${ss}`
|
|
this.date = `${year} - ${month} - ${date}`
|
|
// if (this.$i18n.locale === 'en-us') {
|
|
// let enMonth = ''
|
|
// switch (month) {
|
|
// case 1:
|
|
// enMonth = 'Jan.'
|
|
// break
|
|
// case 2:
|
|
// enMonth = 'Feb.'
|
|
// break
|
|
// case 3:
|
|
// enMonth = 'Mar.'
|
|
// break
|
|
// case 4:
|
|
// enMonth = 'Apr.'
|
|
// break
|
|
// case 5:
|
|
// enMonth = 'May'
|
|
// break
|
|
// case 6:
|
|
// enMonth = 'Jun.'
|
|
// break
|
|
// case 7:
|
|
// enMonth = 'Jul.'
|
|
// break
|
|
// case 8:
|
|
// enMonth = 'Aug.'
|
|
// break
|
|
// case 9:
|
|
// enMonth = 'Sep.'
|
|
// break
|
|
// case 10:
|
|
// enMonth = 'Oct.'
|
|
// break
|
|
// case 11:
|
|
// enMonth = 'Nov.'
|
|
// break
|
|
// case 12:
|
|
// enMonth = 'Dec.'
|
|
// break
|
|
// }
|
|
// this.date = `${date}th ${enMonth}, ${year}`
|
|
// }
|
|
this.week = `${week}`
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(this.timer)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.date-wraper
|
|
_font(.25rem, .25rem, #e1e9f4,,right)
|
|
font-family SourceHanSansCN-Regular
|
|
.time-wraper
|
|
_font(.16rem, .16rem, #e1e9f4,,right)
|
|
font-family SourceHanSansCN-Regular
|
|
margin-top .1rem
|
|
</style>
|