//html5实现实施时间
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>显示实时时间</title> 7 </head> 8 <body> 9 <div class="showTime">展示时间</div> 10 <script> 11 var t = null; 12 t = setTimeout(time, 1000); //开始运行 13 function time(){ 14 clearTimeout(t); //清除定时器 15 dt = new Date(); 16 var y = dt.getFullYear(); 17 var mt = dt.getMonth() + 1; 18 var day = dt.getDate(); 19 var h = dt.getHours();//获取时 20 var m = dt.getMinutes();//获取分 21 var s = dt.getSeconds(); //获取秒 22 document.querySelector(".showTime").innerHTML = 23 '当前时间:' + 24 y + "年" + 25 mt + "月" + 26 day + "-" + 27 h + "时" + 28 m + "分" + 29 s + "秒"; 30 t = setTimeout(time, 1000); //设定定时器,循环运行 31 } 32 </script> 33 </body> 34 </html>
1 用vue实现 2 3 <!DOCTYPE html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>展现实时时间</title> 7 </head> 8 <body> 9 <div id="app"> {{ date|formatDate }}</div> 10 <script src="https://unpkg.com/vue/dist/vue.min.js"></script> 11 <script> 12 var padDate = function (value) { 13 return value < 10 ? '0' + value : value; 14 }; 15 var formatDate = function (value) { 16 //value需要过滤的数据 17 var date = new Date(value); 18 var year = date.getFullYear(); 19 var month = padDate(date.getMonth() + 1); 20 var day = padDate(date.getDate()); 21 var hours = padDate(date.getHours());//获取时 22 var minutes = padDate(date.getMinutes());//获取分 23 var seconds = padDate(date.getSeconds()); //获取秒 24 return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds+' '; 25 } 26 var app = new Vue({ 27 el:'#app', 28 data:{ 29 date: new Date() 30 }, 31 filters: { 32 formatDate:formatDate 33 }, 34 mounted: function() { 35 var _this = this; 36 this.timer = setInterval(function() { 37 _this.date = new Date(); 38 }, 1000); 39 }, 40 beforeDestroy: function () { 41 if(this.timer) { 42 clearInterval(this.timer); 43 } 44 } 45 46 }) 47 </script> 48 </body> 49 </html>