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


Posted in Javascript onFebruary 02, 2015

本文实例讲述了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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 #Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 #Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
JQuery动画与特效实例分析
Feb 02 #Javascript
Javascript核心读书有感之词法结构
Feb 01 #Javascript
Javascript核心读书有感之语言核心
Feb 01 #Javascript
jQuery功能函数详解
Feb 01 #Javascript
You might like
PHP网络操作函数汇总
2015/05/18 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
js实现简易ATM功能
2020/10/27 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python中有几个关键字
2020/06/04 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
创业计划书撰写原则
2014/01/25 职场文书
工程负责人任命书
2014/06/06 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
个人业务学习心得体会
2016/01/25 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python