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 14 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jQuery中extend函数详解
Feb 13 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
巧用canvas
Jan 21 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 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
输出控制类
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php防止用户重复提交表单
2015/11/02 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
详解vue 组件
2020/06/11 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python实现ftp文件传输功能
2020/03/20 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
大学生毕业自荐信
2013/10/10 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL