当前位置: 首页 > 编程笔记 >

JavaScript实现同步于本地时间的动态时间显示方法

东方辉
2023-03-14
本文向大家介绍JavaScript实现同步于本地时间的动态时间显示方法,包括了JavaScript实现同步于本地时间的动态时间显示方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了JavaScript实现同步于本地时间的动态时间显示方法。分享给大家供大家参考。具体分析如下:

动态显示时间的例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情,

但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领。
一、基本目标


实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码。


二、制作过程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

        <title>jsclock</title>  

    </head>  

    <body>  

        <script type="text/javascript">  

        function clock() {  

            var time = new Date().toLocaleString();  

            document.getElementById("clock").innerHTML = time;  

        }  

        setInterval("clock()", 1000);  

        </script>  

        <span id="clock"></span>  

    </body>  

</html>

1. Date对象如果使用没有参数的构造函数,就会返回客户端的时间,toLocaleString()方法就是把时间转化成本地显示时间的格式,如果仅仅是toString()方法则只把时间转化成一个英语写法的时间字符串。同时,亲自实现发现toLocaleTimeString()方法是不存在的,请不要折腾。如果对于系统自带的方法转化出来的时间不满意,请使用各类的getDay(),getMonth(),getFullYear()等方法去构造字符串。再次不作展示。

2. innerHTML相当于id为clock其下的所有元素,document.getElementById("clock").innerHTML = time;一句的含义就把<span id="clock"></span>两标签中所夹的东西变为time字符串的内容

3.本JavaScript的关键在于setInterval("clock()", 1000);函数,意思为每1000毫秒,也就是每1秒,把clock()函数执行一次。也就是每一秒把<span id="clock"></span>两标签中所夹的东西变为time字符串的内容更新一次。

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍基于javascript实现动态显示当前系统时间,包括了基于javascript实现动态显示当前系统时间的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了javascript实现动态显示当前系统时间的详细代码,具体内容如下 (1)时间日期信息,应该在一个<div>中来显示 (2)定时器:每隔一秒再次访问系统时间,window对象的setTimeout() (3)时钟显示的时机(

  • 本文向大家介绍Python检查和同步本地时间(北京时间)的实现方法,包括了Python检查和同步本地时间(北京时间)的实现方法的使用技巧和注意事项,需要的朋友参考一下 背景 有时本地服务器的时间不准了,需要同步互联网上的时间。 解决方案 NTP时间同步,找到一些可用的NTP服务器进行同步即可。 通过获取一些大型网站的时间来同步为自己的时间。 * 由于NTP时间同步,如果相差比如有好几个小时,那么时

  • 本文向大家介绍javascript显示动态时间的方法汇总,包括了javascript显示动态时间的方法汇总的使用技巧和注意事项,需要的朋友参考一下 1.第一种方法 2.第二种方法 3.第一种方法

  • 本文向大家介绍Java实现时间动态显示方法汇总,包括了Java实现时间动态显示方法汇总的使用技巧和注意事项,需要的朋友参考一下 本文所述实例可以实现Java在界面上动态的显示时间。具体实现方法汇总如下: 1.方法一 用TimerTask: 利用java.util.Timer和java.util.TimerTask来做动态更新,毕竟每次更新可以看作是计时1秒发生一次。 代码如下: 继承TimerTa

  • 本文向大家介绍JavaScript实现世界各地时间显示,包括了JavaScript实现世界各地时间显示的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现世界各地时间显示的具体代码,供大家参考,具体内容如下 代码如下: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实时显示北京时间的方法,包括了javascript实时显示北京时间的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实时显示北京时间的方法。分享给大家供大家参考。具体如下: 该页面中实时显示北京时间,更改时区也可以作为显示世界时间,代码如下: 希望本文所述对大家的javascript程序设计有所帮助。