网页原生html实现实时时间和vue 实现实时时间 

//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>

 

posted @ 2020-10-28 16:46  The_Blue_Sky  阅读(620)  评论(0)    收藏  举报