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中使用inline函数的问题
Mar 08 Javascript
javascript英文日期(有时间)选择器
May 02 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
详解angular element()方法使用
Apr 08 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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中echo与print区别点整理
2021/03/09 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Python列表的切片实例讲解
2019/08/20 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
一帮一活动总结
2014/05/08 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript