您的当前位置:首页正文

jQuery实现的电子时钟效果完整示例

2020-11-27 来源:筏尚旅游网

本文实例讲述了jQuery实现的电子时钟效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
 <head>
 <title>www.gxlcms.com 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:这里再为大家推荐几款相关的在线工具供大家参考:

在线秒表工具:
http://tools.jb51.net/bianmin/miaobiao

Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime

在线世界各地时间查询:
http://tools.jb51.net/zhuanhuanqi/worldtime

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

显示全文