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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python xml解析实例详解
2016/11/14 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
python使用建议与技巧分享(一)
2020/08/17 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
护理专业自荐书
2014/06/04 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
现场施工员岗位职责
2015/04/11 职场文书
经营场所证明范本
2015/06/19 职场文书
加强党性修养心得体会
2016/01/21 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL