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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
vue 中filter的多种用法
Apr 26 Javascript
javascript实现时钟动画
Dec 03 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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上的memcache和memcached两个pecl库
2010/03/29 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python通过Pillow实现图片对比
2020/04/29 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
公务员保密承诺书
2014/03/27 职场文书
人资专员岗位职责
2014/04/04 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
合作合同协议书范本
2015/01/27 职场文书
学校节水倡议书
2015/04/29 职场文书