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中的有名函数和无名函数
Oct 17 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 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-MySQL教程归纳总结
2008/06/07 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python实现简易通讯录修改版
2018/03/13 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python flask框架实现重定向功能示例
2019/07/02 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
教师自荐信范文
2013/12/09 职场文书
收款授权委托书
2014/10/02 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2016年母亲节广告语
2016/01/28 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
女性励志书籍推荐
2019/08/19 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers