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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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 if 想到的些问题
2008/03/22 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python协程的用法和例子详解
2017/09/09 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python断言assert的用法代码解析
2018/02/03 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
django+mysql的使用示例
2018/11/23 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python数据挖掘需要学的内容
2019/06/23 Python
Django model select的多种用法详解
2019/07/16 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python中bisect的使用方法
2019/12/31 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
办公室主任职责范文
2013/11/08 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书