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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
详解Layer弹出层样式
Aug 21 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
简单实现python爬虫功能
2015/12/31 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
新大陆软件面试题
2016/11/24 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
司仪主持词两篇
2014/03/22 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
电教室标语
2014/06/20 职场文书
党员自我对照检查材料
2014/08/19 职场文书
师德师风个人整改措施
2014/10/27 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
初中政教处工作总结
2015/08/12 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android