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