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

先看看效果：

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

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

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

//动态的显示当前时间
;(function($){
    "use strict";
    var time = "";
    //获得当前的时间
    function currentTime(){
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = changeNum(nowDate.getMonth()+1);
        var date = changeNum(nowDate.getDate());
        var hour = changeNum(nowDate.getHours());
        var miunte = changeNum(nowDate.getMinutes());
        var second = changeNum(nowDate.getSeconds());

        return year+"-"+month+"-"+date+" "+hour+":"+miunte+":"+second;    
    }
    function changeNum(t){
        return t < 10 ? "0" + t : t;
    }
    $.fn.showCurrentTime = function(){
        var div = $(this);
        return this.each(function(){
            setTimeout(function(){
                time = currentTime();
                div.text(time);                
            },1000);
        });
        
    };
})(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做的，截图的时候没截好， ╮(╯﹏╰）╭凑合着吧。