<!DOCTYPE html> <html> <head> <title> jQuery电子时钟</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <span>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:这里再为大家推荐几款相关的在线工具供大家参考：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》