<!doctype html> <html> <head> <title>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
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样操作angular5路由传参
如何操作vue2.0+从插件开发到npm发布
怎样操作vscode内使用.vue代码
以上就是如何操作jquery实现电子时钟效果的详细内容。