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 相关文章推荐
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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&amp;MYSQL留言板源码
2020/07/19 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
js调用css属性写法
2013/09/21 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python如何求100以内的素数
2020/05/27 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
final, finally, finalize的区别
2012/03/01 面试题
管理科学大学生求职信
2013/11/13 职场文书
个性发展自我评价
2014/02/11 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
优秀员工事迹材料
2014/12/20 职场文书
工作时间调整通知
2015/04/24 职场文书