Jquery一个显示当前时间的简单插件

Posted 2020-09-08

先看看效果：

html代码部分，其他代码都省略了，就把显示时间的标签贴出来，就是一个简单的<p>标签

 <p id="show"></p> 

接下来就是自定义插件部分了，我把这个插件放在了myfunction.js中,代码如下:

 1 //动态的显示当前时间
 2 ;(function($){
 3     "use strict";
 4     var time = "";
 5     //获得当前的时间
 6     function currentTime(){
 7         var nowDate = new Date();
 8         var year = nowDate.getFullYear();
 9         var month = changeNum(nowDate.getMonth()+1);
10         var date = changeNum(nowDate.getDate());
11         var hour = changeNum(nowDate.getHours());
12         var miunte = changeNum(nowDate.getMinutes());
13         var second = changeNum(nowDate.getSeconds());
14 
15         return year+"-"+month+"-"+date+" "+hour+":"+miunte+":"+second;    
16     }
17     function changeNum(t){
18         return t < 10 ? "0" + t : t;
19     }
20     $.fn.showCurrentTime = function(){
21         var div = $(this);
22         return this.each(function(){
23             setTimeout(function(){
24                 time = currentTime();
25                 div.text(time);                
26             },1000);
27         });
28         
29     };
30 })(jQuery);

调用方式如下：

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/myfunction.js"></script>
<script>    
    $(function(){
        $("#show").showCurrentTime();
    })
</script>

一定要把jquery给包含进来，不然就没办法执行了。

结果如下

为了更好地显示我加了一点css样式，不过最后结果就是这样啦。这样就可以多次使用而不用每次都自己再写一遍了。

ps:要是发现图片没有动，就按F5再刷新一遍本页面吧，图片是自己用ps做的，截图的时候没截好， ╮(╯﹏╰）╭凑合着吧。