jQuery实现的电子时钟效果完整示例
本文实例讲述了jquery实现的电子时钟效果。分享给大家供大家参考,具体如下:
<!doctype html> <html> <head> <title>www.jb51.net jquery电子时钟</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <span id="time">haha</span> <script type="text/javascript"> window.onload = function(){ showtime(); } function showtime(){ var mydate = new date(); var year = mydate.getfullyear(); var month = mydate.getmonth() + 1; var date = mydate.getdate(); var dayarray = new array(7); dayarray[0] = "星期日"; dayarray[1] = "星期一"; dayarray[2] = "星期二"; dayarray[3] = "星期三"; dayarray[4] = "星期四"; dayarray[5] = "星期五"; dayarray[6] = "星期六"; var day1 = mydate.getday(); var day = dayarray[day1]; var hour = mydate.gethours(); var minute = mydate.getminutes(); var second = mydate.getseconds(); var min = checktime(minute); var sec = checktime(second); var time1 = year + "年" + month + "月" + date + "日"; var time2 = hour + ":" + min + ":" + sec; // document.write(time1+day+time2); //用js方法 // document.getelementbyid("time").innerhtml = time1+day+time2; //用jquery方法 $('#time').text(time1+day+time2); settimeout("showtime()",500); } function checktime(i){ if(i<10){ i = "0" + i; } return i; } </script> </body> </html>
运行效果:
实例小结:
1、注意js文件引用,要在head中声明,在body中展开时,无需重新申明引用信息等;
2、注意date有关函数,获取时候不要忘记了get和括号;
3、注意window.onload = function(){}
的写法;
4、月份要注意数组开始顺序,从一月份开始,下标是0,以此类增;
5、注意时、分、秒函数为复数;
6、day表示获取星期几,但是获取的是数字,可以用数组转换(0表示周日,其它一一对应)
7、settimeout函数:settimeout(a,b)
,注意settimeout
中out为小写
a:函数体 b:函数执行间隔
8、settimeout执行过程中,不要使用document.write
,否则递归调用未实现;
9、jquery选择器中使用单引号还是双引号?
理论上单双都可以,在嵌套情况下视具体情况而定。
10、关于jquery获取标签文本内容:方法1:text();方法2:html();
注意,需要改变文本内容时,正确格式为:$('#time').text("content")
错误格式为:$('#time').text() = "content"
ps:这里再为大家推荐几款相关的在线工具供大家参考:
在线秒表工具:
unix时间戳(timestamp)转换工具:
在线世界各地时间查询:
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery日期与时间操作技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery选择器用法总结》及《jquery常用插件及用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇: 许世友与长山列岛战役
下一篇: 袁世凯有好多小妾为什么独宠五姨太?
推荐阅读
-
JS/jQuery实现获取时间的方法及常用类完整示例
-
Jquery实现的一种常用高亮效果示例代码_jquery
-
jQuery实现的网站banner图片无缝轮播效果完整实例
-
jQuery实现的点击显示隐藏下拉菜单功能完整示例
-
jQuery插件zTree实现的多选树效果示例
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】