日期时间
1、HTML代码
1 <div id="app"> 2 <div class="header-other"> 3 <div class="other-date"> 4 <span>{{ date.month }}</span> 5 <i>月</i> 6 <span>{{ date.day }}</span> 7 </div> 8 <div class="other-time">{{ time }}</div> 9 <div class="other-week">{{ date.week }}</div> 10 </div> 11 </div> 12 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
2、css代码
1 .header-other { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 100%; 6 } 7 .other-date { 8 height: 100%; 9 display: flex; 10 } 11 .other-date span { 12 height: 100%; 13 display: inline-block; 14 font-size: 20px; 15 line-height: 50px; 16 } 17 .other-date i { 18 height: 100%; 19 display: inline-block; 20 margin: 0 8px; 21 line-height: 50px; 22 } 23 .other-time { 24 height: 100%; 25 display: flex; 26 align-items: center; 27 margin: 0 10px; 28 } 29 .other-week { 30 display: flex; 31 align-items: center; 32 margin-right: 30px; 33 }
3、java Script代码
1 new Vue({ 2 el: "#app", 3 data:{ 4 date: {}, 5 time: "", 6 }, 7 created() { 8 this.initDate(); 9 this.initTime(); 10 this.timeID = setInterval(() => { 11 this.initTime(); 12 }, 1000); 13 }, 14 methods:{ 15 initDate() { 16 let date = new Date(); 17 let year = date.getFullYear(); 18 let month = date.getMonth() + 1; 19 let day = date.getDate(); 20 let week = date.getDay(); 21 this.date.year = `${year}`; 22 this.date.month = month < 10 ? "0" + month : month; 23 this.date.day = day < 10 ? "0" + day : day; 24 let vWeek = [ 25 "星期日", 26 "星期一", 27 "星期二", 28 "星期三", 29 "星期四", 30 "星期五", 31 "星期六", 32 ]; 33 this.date.week = vWeek[week]; 34 }, 35 /** 36 * @description 初始化时间 37 */ 38 initTime() { 39 let date = new Date(); 40 let hours = 41 date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); 42 let minutes = 43 date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); 44 let seconds = 45 date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); 46 this.time = `${hours}:${minutes}:${seconds}`; 47 }, 48 } 49 });
