首页 web前端 js教程 jQuery实现电子时钟功能步骤详解

jQuery实现电子时钟功能步骤详解

May 15, 2018 am 09:44 AM
jquery 功能 时钟

这次给大家带来jQuery实现电子时钟功能步骤详解,jQuery实现电子时钟功能的注意事项有哪些,下面就是实战案例,一起来看一下。

<!DOCTYPE html>
<html>
  <head>
    <title>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>
登录后复制

运行效果:

实例小结:

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"

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery遍历XML节点与属性实现步骤

Vue波纹按钮组件使用详解

以上是jQuery实现电子时钟功能步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

豆包app有什么功能 豆包app有什么功能 Mar 01, 2024 pm 10:04 PM

豆包app里会有很多ai创作的功能,那么豆包app有什么功能呢?用户们可以通过这个软件来创作绘画,和ai进行聊天,还能够为用户生成文章,帮助大家搜索歌曲等。这篇豆包app功能介绍就能够告诉大家具体的操作方法,下面就是具体内容,赶紧看看吧!豆包app有什么功能答:可以绘画、聊天、写文、找歌。功能介绍:1、问题查询:可以通过ai来更快的找到问题的答案,什么样的问题都是可以询问。2、图片生成:可以有ai来为大家创建不同的图片,只需要告诉大家大概的要求。3、ai聊天:能够为用户们创建一个可以聊天的ai,

vivox100s和x100区别:性能对比及功能解析 vivox100s和x100区别:性能对比及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手机都是vivo手机产品线中的代表机型,它们分别代表了vivo在不同时间段内的高端技术水平,因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较,帮助消费者更好地选择适合自己的手机。首先,我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的

iPhone中缺少时钟应用程序:如何修复 iPhone中缺少时钟应用程序:如何修复 May 03, 2024 pm 09:19 PM

您的手机中缺少时钟应用程序吗?日期和时间仍将显示在iPhone的状态栏上。但是,如果没有时钟应用程序,您将无法使用世界时钟、秒表、闹钟等多项功能。因此,修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序,您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动,直到到达“应用程序库”页面。步骤2–接下来,在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时,请按住它并

自媒体到底是什么?它的主要特点和功能有哪些? 自媒体到底是什么?它的主要特点和功能有哪些? Mar 21, 2024 pm 08:21 PM

随着互联网的快速发展,自媒体这个概念已经深入人心。那么,自媒体到底是什么?它有哪些主要特点和功能呢?接下来,我们将一一探讨这些问题。一、自媒体到底是什么?自媒体,顾名思义,就是自己就是媒体。它是指通过互联网平台,个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体,如报纸、电视、电台等,自媒体具有更强的互动性和个性化,让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些?1.低门槛:自媒体的崛起降低了进入媒体行业的门槛,不再需要繁琐的设备和专业的团队,一部手

小红书账号管理软件有哪些功能?怎么经营小红书账号? 小红书账号管理软件有哪些功能?怎么经营小红书账号? Mar 21, 2024 pm 04:16 PM

随着小红书在年轻人中的流行,越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中,我们将讨论一些小红书账号管理软件的功能,并探讨如何更好地经营小红书账号。随着社交媒体的发展,许多人发现自己需要管理多个社交账号。对于小红书用户来说,这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号,包括自动发布内容、定时发布、数据分析等功能。通过这些工具,用户可以更高效地管理他们的账号,提高账号的曝光率和关注度。另一、小红书账号管理软件有

PHP技巧:快速实现返回上一页功能 PHP技巧:快速实现返回上一页功能 Mar 09, 2024 am 08:21 AM

PHP技巧:快速实现返回上一页功能在网页开发中,经常会遇到需要实现返回上一页的功能。这样的操作可以提高用户体验,让用户更加方便地在网页之间进行导航。在PHP中,我们可以通过一些简单的代码来实现这一功能。本文将介绍如何快速实现返回上一页功能,并提供具体的PHP代码示例。在PHP中,我们可以使用$_SERVER['HTTP_REFERER']来获取上一页的URL

什么是Discuz?Discuz的定义和功能介绍 什么是Discuz?Discuz的定义和功能介绍 Mar 03, 2024 am 10:33 AM

《探索Discuz:定义、功能及代码示例》随着互联网的迅猛发展,社区论坛已经成为人们获取信息、交流观点的重要平台。在众多的社区论坛系统中,Discuz作为国内较为知名的一种开源论坛软件,备受广大网站开发者和管理员的青睐。那么,什么是Discuz?它又有哪些功能,能为我们的网站提供怎样的帮助呢?本文将对Discuz进行详细介绍,并附上具体的代码示例,帮助读者更

Linux下GDM的功能和作用详解 Linux下GDM的功能和作用详解 Mar 01, 2024 pm 04:18 PM

Linux下GDM的功能和作用详解在Linux操作系统中,GDM(GNOMEDisplayManager)是一种图形化登录管理器,它提供了用户在系统中登录和注销的界面。GDM通常是GNOME桌面环境的一部分,但也可以被其他桌面环境所使用。GDM的作用不仅仅是提供一个登录界面,还包括用户会话管理、屏幕保护、自动登录等功能。GDM的功能主要包括以下几个方面:

See all articles