
正文
使用jquery实现动态时钟
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
先导入jquery-1.7.2.min.js或其他版本文件
js部分
<script>
$(function () {
showTime(); //文档加载后。就开始显示时间
var setTime = setInterval(showTime, 1000); //定义一个计时器。1s执行一次
}); //显示时间
function showTime() {
//获取当前时间
var data = new Date();
//向年的span标签中添加数据
$("#Year").text(data.getFullYear());
//获取月份
var m = data.getMonth();
//应为下标为0所以要+1等于现在的月份
//判断是否是月份是否小于10
if (m + 1 < 10) {
//月份小10就输出0+月份数
$("#Month").text("0" + (data.getMonth() + 1));
}
else {
//月份大于等于10就显示m值
$("#Month").text((data.getMonth() + 1));
}
//获取日
var m = data.getDate(); //日如果小于10
if (m < 10) {
//如果小于10就显示0+日期
$("#Date").text("0" + data.getDate());
}
else {
//大于等于10显示m的值日
$("#Date").text(data.getDate());
}
//获取时
var m = data.getHours();
if (m < 10) {
//小于10显示0+时
$("#Hours").text("0" + data.getHours());
} else {
//大于等于10显示m的值时
$("#Hours").text(data.getHours());
}
//获取分
var m = data.getMinutes();
if (m < 10) {
//小于10显示0 + 时输出分
$("#Minutes").text("0" + data.getMinutes());
}
else {
//大于等于10显示m的值分
$("#Minutes").text(data.getMinutes());
} //获取秒
var m = data.getSeconds();
if (m < 10) {
//小于10显示0 + 时输出秒
$("#Secondes").text("0" + data.getSeconds());
}
else {
//大于等于10时就显示m的值秒
$("#Secondes").text(data.getSeconds());
}
//声明是一个变量获取星期信息
var week
//获取星期几
var w = data.getDay();
switch (w) {
case 0:
week = "日";
break;
case 1:
week = "一";
break;
case 2:
week = "二";
break;
case 3:
week = "三";
break;
case 4:
week = "四";
break;
case 5:
week = "五";
break;
case 6:
week = "六";
break;
}
$("#week").text(week);
}
</script>
html部分
<div class="stats">
<p class="stat">星期:<span class="number" id="week"></span></p>
<p class="stat"><span class="number" id="Secondes"></span>秒</p>
<p class="stat"><span class="number" id="Minutes"></span>分</p>
<p class="stat"><span class="number" id="Hours"></span>时</p>
<p class="stat"><span class="number" id="Date"></span>日</p>
<p class="stat"><span class="number" id="Month"></span>月</p>
<p class="stat"><span class="number" id="Year"></span>年</p>
<p class="stat">当前日期:</p>
</div>








