JavaScript实现同步于本地时间的动态时间显示方法
作者：yongh701 时间：2024-05-11 09:33:19
本文实例讲述了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程序设计有所帮助。
0
投稿猜你喜欢
Go语言快速入门图文教程
python笔记（1） 关于我们应不应该继续学习python
python制作花瓣网美女图片爬虫
Centos7 下Mysql5.7.19安装教程详解
微软:跑分速度不是IE8的开发重点
mysql巡检脚本(必看篇)
Python实现敏感词过滤的4种方法
Python 动态导入对象,importlib.import_module()的使用方法
利用css的clear属性搞定广告文字环绕效果
python reduce 函数使用详解
完美解决Python matplotlib绘图时汉字显示不正常的问题
Python全栈之学习CSS(1)
六种酷炫Python运行进度条效果的实现代码
python迭代器,生成器详解
教你轻松掌握常用的子句、关键词和函数
在ASP.NET 2.0中操作数据之一：创建一个数据访问层
Python实现两个list求交集，并集，差集的方法示例
pycharm中import呈现灰色原因的解决方法
微信小程序wxml列表渲染原理解析
IDEA版使用Java操作Redis数据库的方法
