今天就跟大家聊聊有关使用jQuery怎么实现一个电子时钟效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
具体如下:
<!DOCTYPE html>
<html>
<head>
<title></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"
看完上述内容,你们对使用jQuery怎么实现一个电子时钟效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。