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脚本调试方法小结
Nov 24 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
理解javascript中DOM事件
Dec 25 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
JS实现音乐导航特效
Jan 06 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传输数据的代码
2007/11/13 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python continue继续循环用法总结
2018/06/10 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
2014年教师节寄语
2014/04/03 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
跑出一片天观后感
2015/06/08 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android