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

先看看效果：

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做的，截图的时候没截好， ╮(╯﹏╰）╭凑合着吧。