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中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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/20 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Nuxt.js实战详解
2018/01/18 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Django实现登录随机验证码的示例代码
2018/06/20 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
详解Django中间件执行顺序
2018/07/16 Python
Python理解递归的方法总结
2019/01/28 Python
python视频按帧截取图片工具
2019/07/23 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
运动会广播稿80字
2014/01/23 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
安踏广告词改编版
2014/03/21 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
入党政审材料范文
2014/12/24 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Python开发五子棋小游戏
2022/04/28 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技