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 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php实现两个数组相加的方法
2015/02/17 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PDO::exec讲解
2019/01/28 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
详解vue 组件
2020/06/11 Javascript
一张图带我们入门Python基础教程
2017/02/05 Python
python实现推箱子游戏
2020/03/25 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python如何实现邮件功能
2020/05/27 Python
酒店管理专业学生求职信
2013/09/27 职场文书
工作的心得体会
2013/12/31 职场文书
高三英语教学反思
2014/01/13 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
幽灵公主观后感
2015/06/09 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android