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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 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时间不正确的解决方法
2008/04/09 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python zip()函数用法实例分析
2018/03/17 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Python 列表的清空方式
2020/01/13 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
DJI全球:DJI Global
2021/03/15 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
2019个人工作总结
2019/06/21 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
世界文化遗产导游词
2019/08/07 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
Python实现数据的序列化操作详解
2022/07/07 Python