这样例很easy。了解JavaScript之后就是几行的代码便可以完毕的事情。

可是对于一些未接触过JavaScript的人来说，差点儿非常大project的样子。然后在网上苦苦寻觅代码，之后在茫茫的html代码中寻求不到，终于得不到要领。

一、基本目标

实现一个随同client（浏览者机器上的）时间的网页文本时间。使用最短的代码。

二、制作过程

<!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对象假设使用没有參数的构造函数，就会返回client的时间，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】一个同步于本地时间的动态时间的更多相关文章

  1. 动态时间规整DTW(Dynamic Time Warping )

    动态时间规整DTW(Dynamic Time Warping ) 原文:https://blog.csdn.net/raym0ndkwan/article/details/45614813 算法笔记- ...

  2. cisco 交换机设置时区、时间、同步日志本地时间

    Core-Switch-1#show clockCore-Switch-1#show ntp statusCore-Switch-1#conf tCore-Switch-1(config)# cloc ...

  3. 第一百四十五节，JavaScript，同步动画

    JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...

  4. 转自文翼的博客：将本地时间转换为 GMT 时间

    在写 RSS 订阅接口的时候,发现最终输出文章的 RSS 时间(GMT时间),在本地上显示的时间和在服务器上显示的时间不一致. 原因是时区不一致,那么在 JavaScript 中,如何将时间转换为统一 ...

  5. 【Android Developers Training】 96. 运行一个同步适配器

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  7. 使用JavaScript开发IE浏览器本地插件实例

    使用JavaScript开发IE浏览器本地插件实例 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2015-02-18我要评论 这篇文章主要介绍了使用JavaScript开发IE浏览器本 ...

  8. PHP中关于时间、时区、本地时间、UTC时间、GMT时间、时间戳等知识的梳理

    在PHP开发中,我们经常会在时间问题上被搞糊涂,比如我们希望显示一个北京时间,但是当我们使用date函数进行输出时,却发现少了8个小时.几乎所有的php猿类都必须对php中几个重要的时间转换等方法进行 ...

  9. JavaScript有同步任务和异步任务，浏览器是怎么处理的？

    1.在讨论浏览器与JavaScript之前,我们先来简单了解一下进程与线程 进程(process):资源分配的最小单位 进程是应用程序的执行实例,是操作系统进行资源分配和调度的一个独立单位. 线程(t ...

随机推荐

  1. C# Sftp操作

    SFTP释义-----引自百度百科 sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的网络的加密方法.sftp 与 ftp 有着 ...

  2. 论MORMOT序列的JSON格式

    论MORMOT序列的JSON格式 JSON 数据使用 UTF-8 编码 BLOB 字段值会用 Base64编码 JSON数据是一个对象数组: [ {"col1":val11,&qu ...

  3. 【java】实体类中 Set<对象> 按照对象的某个字段对set排序

    背景: User实体类 有个属性是 Set<PositionChange> 职位变更字段 如下: PositionChange实体类  有个属性是positionStartDate   什 ...

  4. 使用moment.js管理时间

    如果在nodejs下 npm install moment 引用模块: var moment = require('moment'); 用法: 当前时间:2015-11-07 18:00:51 mom ...

  5. [ Android Memory] MAT查看图片资源

    参考: http://stackoverflow.com/questions/12709603/mat-eclipse-memory-analyzer-how-to-view-bitmaps-from ...

  6. 如何 RESTFul 你的服务（译）

    原文:http://reynders.co/how-restful-is-your-service/发表于:2013年9月 如今无论是社交媒体平台还是企业解决方案,Web services都不出不在. ...

  7. [转]SQL Server表分区

    本文转自:http://www.cnblogs.com/knowledgesea/p/3696912.html 什么是表分区 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区 ...

  8. 较详细的介绍JNI

    JNI其实是Java Native Interface的简称,也就是java本地接口.它提供了若干的API实现了和Java和其他语言的通信(主要是C&C++).也许不少人觉得Java已经足够强 ...

  9. HDU 3726 Graph and Queries treap树

    题目来源:HDU 3726 Graph and Queries 题意:见白书 思路:刚学treap 參考白皮书 #include <cstdio> #include <cstring ...

  10. [React] Detect user activity with a custom useIdle React Hook

    If the user hasn't used your application for a few minutes, you may want to log them out of the appl ...