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学习历程和心得小结
Aug 16 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
JavaScript实现HSL拾色器
May 21 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的call_user_func传reference引发的思考
2010/07/23 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
外贸业务员工作职责
2014/01/06 职场文书
一月红领巾广播稿
2014/02/11 职场文书
工程项目建议书范文
2014/03/12 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
手机销售员岗位职责
2015/04/11 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫