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做的，截圖的時候沒截好， ╮(╯﹏╰）╭湊合着吧。