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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现本地时间同步功能

    本文实例为大家分享了js实现本地时间同步的具体代码,供大家参考,具体内容如下 HTML代码 <html> <head> <title>时间</title> <meta charset="utf-8"> </head> <body onload="getTime()"> <span id="nowDateTimeSpan" ></span>

  • Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页

  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

  • 使用iojs的jsdom库实现同步系统时间

    使用iojs的jsdom库与 http://open.baidu.com/special/time/ 同步系统时间. var jsdom = require("jsdom"); var exec = require('child_process').exec; jsdom.env({ url: "http://open.baidu.com/special/time/", scripts: ["D:\\jquery-1.9.1.min.js"],

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

    本文实例讲述了JavaScript实现同步于本地时间的动态时间显示方法.分享给大家供大家参考.具体分析如下: 动态显示时间的例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情, 但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领. 一.基本目标 实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码. 二.制作过程 复制代码 代码如下: <!DOCTYPE html

  • javascript页面上使用动态时间具体实现

    复制代码 代码如下: <!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=&qu

  • js显示动态时间的方法详解

    js显示动态时间的方法详解

    本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的

  • Javascript如何递归遍历本地文件夹

    打印本地temp folder所有的文件及最后修改时间: <html> <head> <script language="javascript"> var s = ""; var result = []; function FileInfo(path, name,time) { this.path = path; this.name = name; this.time = time; } function showFolderFi

  • UTC时间、GMT时间、本地时间、Unix时间戳的具体使用

    目录 1.UTC时间 与 GMT时间 2.UTC时间 与 本地时 3.UTC 与 Unix时间戳 1.UTC时间 与 GMT时间 我们可以认为格林威治时间就是时间协调时间(GMT=UTC),格林威治时间和UTC时间均用秒数来计算的. 2.UTC时间 与 本地时 UTC + 时区差 ＝ 本地时间 时区差东为正,西为负.在此,把东八区时区差记为 +0800, UTC + (+0800) = 本地(北京)时间 (1) 那么,UTC = 本地时间(北京时间))- 0800 (2) 3.UTC 与 Uni

  • JavaScript获取当前时间向前推三个月的方法示例

    JavaScript获取当前时间向前推三个月的方法示例

    本文实例讲述了JavaScript获取当前时间向前推三个月的方法.分享给大家供大家参考,具体如下: <!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"&g

  • javascript元素动态创建实现方法

    本文实例讲述了javascript元素动态创建实现方法.分享给大家供大家参考.具体分析如下: document.write只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • 纯js实现动态时间显示

    本文实例为大家分享了js动态时间显示 的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js动态时间显示 </title> </head> <body id = "show"> <script> function run(){ var time = ne

  • JavaScript实现预览本地上传图片功能完整示例

    JavaScript实现预览本地上传图片功能完整示例

    本文实例讲述了JavaScript实现预览本地上传图片功能.分享给大家供大家参考,具体如下: <html> <head> <title>www.jb51.net 图片上传预览</title> <script> function PreviewImage(imgFile) { var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/; if (!pattern.t

  • javascript实现时间日期的格式化的方法汇总

    有的时候,我们需要一定格式的 时间 比如 2017-05-12 08:48 这样的格式. 上代码先 时间格式化 第一种 function formatDate(time){ var date = new Date(time); var year = date.getFullYear(), month = date.getMonth() + 1,//月份是从0开始的 day = date.getDate(), hour = date.getHours(), min = date.getMinute

随机推荐