如何操作jQuery实现电子时钟效果

这次给大家带来如何操作jQuery实现电子时钟效果,操作jQuery实现电子时钟效果的注意事项有哪些,下面就是实战案例,一起来看一下。

      jQuery电子时钟            haha        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;    }      

登录后复制

运行效果:

如何操作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”

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

怎样操作Angular5路由传参

如何操作vue2.0+从插件开发到npm发布

怎样操作vscode内使用.vue代码

以上就是如何操作jQuery实现电子时钟效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2751725.html

(0)
上一篇 2025年3月8日 05:56:21
下一篇 2025年3月7日 04:14:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 怎样使用vue+jquery+lodash实现滑动时顶部悬浮

    这次给大家带来怎样使用vue+jquery+lodash实现滑动时顶部悬浮,使用vue+jquery+lodash实现滑动时顶部悬浮的注意事项有哪些,下面就是实战案例,一起来看一下。 这个效果是一个项目中抽出来的一个demo效果。 前期准备…

    2025年3月8日
    200
  • 如何使用Vue实现PopupWindow组件

    这次给大家带来如何使用Vue实现PopupWindow组件,使用Vue实现PopupWindow组件的注意事项有哪些,下面就是实战案例,一起来看一下。 这段时间一直在学习前端技术来完成自己的小项目。在js方面就使用了Vue框架。由于在项目里…

    2025年3月8日
    200
  • 利用jQuery如何实现左右滑动的toggle方法?

    下面我就为大家分享一篇jquery实现左右滑动的toggle方法,具有很好的参考价值,希望对大家有所帮助。 我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。 slideUp…

    2025年3月8日
    200
  • 利用vue如何实现图片滚动?

    下面我就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果),具有很好的参考价值,希望对大家有所帮助。 上次写了一个简单的图片轮播,这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用…

    编程技术 2025年3月8日
    200
  • 利用vue2.0中swiper组件实现轮播(详细教程)

    下面我就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码,具有很好的参考价值,希望对大家有所帮助。 1、安装swiper npm install swiper@3.4.1 –save-dev 登录后复制 2、引用组件 im…

    编程技术 2025年3月8日
    200
  • 怎样操作layui实现动态和静态分页

    这次给大家带来怎样操作layui实现动态和静态分页,操作layui实现动态和静态分页的注意事项有哪些,下面就是实战案例,一起来看一下。 开发管理后台是每一个开发人员都要熟悉的一个环节,作为后端程序员,公司的所有机密数据都掌握在我们手上,所以…

    2025年3月8日
    200
  • 如何使用Vue实现点击时间获取时间段查询

    这次给大家带来如何使用Vue实现点击时间获取时间段查询,使用Vue实现点击时间获取时间段查询的注意事项有哪些,下面就是实战案例,一起来看一下。 html代码 今天 昨天 本周 上周 本月 上月 查询 登录后复制 vue.js代码 点击事件 …

    2025年3月8日
    200
  • 如何使用vue组件实现弹出框点击显示隐藏

    这次给大家带来如何使用vue组件实现弹出框点击显示隐藏,使用vue组件实现弹出框点击显示隐藏的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图…

    2025年3月8日
    200
  • 如何使用vue.extend实现alert模态框弹窗组件

    这次给大家带来如何使用vue.extend实现alert模态框弹窗组件,使用vue.extend实现alert模态框弹窗组件的注意事项有哪些,下面就是实战案例,一起来看一下。 alert.js文件代码 import Vue from ‘vu…

    编程技术 2025年3月8日
    200
  • 怎样使用vue实现点击展开点击收起

    这次给大家带来怎样使用vue实现点击展开点击收起,使用vue实现点击展开点击收起的注意事项有哪些,下面就是实战案例,一起来看一下。 安装vue的步骤在这里就不进行赘述了,下面直接进入正题   首先定义一下data里面的数据: data ()…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论