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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
JS出现404错误原理及解决方案
Jul 01 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/06/15 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
javascript类型转换示例
2014/04/29 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python datetime处理时间小结
2020/04/16 Python
python属于软件吗
2020/06/18 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
python爬虫基础之urllib的使用
2020/12/31 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
运动会致辞稿50字
2014/02/04 职场文书
费城故事观后感
2015/06/10 职场文书
教你用python控制安卓手机
2021/05/13 Python
Python数据分析之pandas读取数据
2021/06/02 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android