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 Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现滑动开关效果
Aug 02 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将向Java靠拢
2006/10/09 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python制作刷网页流量工具
2017/04/23 Python
Django的信号机制详解
2017/05/05 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python获取Linux发行版名称
2019/08/30 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
几个数据库方面的面试题
2016/07/01 面试题
设计模式的基本要素是什么
2014/04/21 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
考博自荐信
2013/10/25 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
关于母亲节的感言
2014/02/04 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers