先导入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>

使用jquery实现动态时钟的更多相关文章

  1. jQuery ClockPicker 圆形时钟

    ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线. 在线实例 实例预览  jQuery ClockPicker 圆形时钟 使用方法 <div class=&qu ...

  2. jquery模拟LCD 时钟

    查看效果网址:http://keleyi.com/keleyi/phtml/jqtexiao/24.htm 以下是HTML文件源代码: <!DOCTYPE html PUBLIC "- ...

  3. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. linux动态时钟探索

    在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...

  5. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. 使用Timer类的两个实例 动态时钟

    package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...

  7. Jquery Mobile 动态添加元素然后刷新 转

    Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...

  8. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  9. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

随机推荐

  1. MOOC(15)- 接口异常处理

    首先通过fiddler拿到正确的传参 把value复制下来,存到json数据中,传参时通过键去json的值即可 但是运行请求的时候报错了 再运行,还是出错 查看fiddler结果 修改,从fiddle ...

  2. 吴裕雄--天生自然python学习笔记:pandas模块读取 Data Frame 数据

    读取行数据 读取一个列数据的语法为: 例如,读取所有学生自然科目的成绩 : import pandas as pd datas = [[65,92,78,83,70], [90,72,76,93,56 ...

  3. python学习笔记(9)函数(一)

    定义一个函数 你可以定义一个由自己想要功能的函数,以下是简单的规则: 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 任何传入参数和自变量必须放在圆括号中间,圆括号之间可以用于定 ...

  4. [洛谷P3806] [模板] 点分治1

    洛谷 P3806 传送门 这个点分治都不用减掉子树里的了,直接搞就行了. 注意第63行 if(qu[k]>=buf[j]) 不能不写,也不能写成>. 因为这个WA了半天...... 如果m ...

  5. ubuntu 服务器 php 环境简单搭建

    安装中文支持,避免一些语言相关的坑 12345678 sudo apt-get install language-pack-zh-hans sudo vim /etc/default/locale L ...

  6. <JZOJ5913>林下风气

    快乐dp 反正考场写挂 #include<cstdio> #include<cstring> #include<cctype> #include<iostre ...

  7. TICA 2019 自动的自动化测试——智能化一站式的API测试服务

    阿里QA导读:新奥集团中台的陈磊为我们打开了AI测试驱动的视野,同时也深入浅出地介绍了如何打造智能化API测试框架.通过陈磊老师的分享,我们看到了AI-DT的无限可能性.以后,AI能不能代替大部分手动 ...

  8. Django中加载static无法成功的解决方法

    我试着进入/admin/ 结果它的/static/ 能够正常找到目标文件…真是日了哈*奇了. 我的link标签href=/static/…. 并没有什么问题 试着在urls中加入下面代码,但是没什么用 ...

  9. QA、EPG、PMO各自的职能划分及关系是什么?

    团队 职能 主要工作内容 EPG 负责过程持续改进工作 公司规范的建设和推广,并持续改进.收集过程改进需求,制定过程改进计划,获得高层的支持,并实施改进工作. PMO 负责公司内所有项目的审核.管理 ...

  10. nginx增加访问验证

    使用OpenSSL实用程序创建密码文件 如果您的服务器上安装了OpenSSL,则可以创建没有附加软件包的密码文件.我们将在/ etc / nginx配置目录中创建一个名为.htpasswd的隐藏文件来 ...