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


Posted in jQuery onApril 28, 2018

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

<!DOCTYPE html>
<html>
  <head>
    <title>3water.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>

运行效果:

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

实例小结:

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 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Djang中静态文件配置方法
2015/07/30 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
经典婚礼主持开场白
2014/03/13 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
计生专干事迹
2014/05/28 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2014小学年度工作总结
2014/12/20 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL