您的位置：首页 > Web前端 > JQuery

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

2018-10-12 14:04 1201 查看

本文实例讲述了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:这里再为大家推荐几款相关的在线工具供大家参考：

在线秒表工具：
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程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航