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插件开发发送短信倒计时功能代码
May 09 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python itertools模块详解
2015/05/09 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
小学开学寄语
2014/01/19 职场文书
感恩教育活动总结
2014/05/05 职场文书
个人租房协议书范本
2014/09/30 职场文书
2014年维修工作总结
2014/11/22 职场文书
保安2014年终工作总结
2014/12/06 职场文书
公司股份合作协议书
2014/12/07 职场文书
烟台的海导游词
2015/02/02 职场文书
同乡会致辞
2015/07/30 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery
mysql序号rownum行号实现方式
2022/12/24 MySQL