js显示动态时间的方法详解

2024-10-20 09:08:49

本文实例讲述了js显示动态时间的方法。分享给大家供大家参考，具体如下：

Date对象的方法

Date 对象能够使你获得相对于国际标准时间（格林威治标准时间，现在被称为 UTC-Universal Coordinated Time）或者是 Flash 播放器正运行的操作系统的时间和日期。要使用Date对象的方法，你就必须先创建一个Date对象的实体（Instance）。

Date 对象必须使用 Flash 5 或以后版本的播放器。

Date 对象的方法并不是静态的，但是在使用时却可以应用于所指定的单独实体。

Date 对象的方法简介：

·getDate            ｜根据本地时间获取当前日期(本月的几号)
·getDay             ｜根据本地时间获取今天是星期几(0-Sunday,1-Monday...)
·getFullYear        ｜根据本地时间获取当前年份(四位数字)
·getHours           ｜根据本地时间获取当前小时数(24小时制,0-23)
·getMilliseconds    ｜根据本地时间获取当前毫秒数
·getMinutes         ｜根据本地时间获取当前分钟数
·getMonth           ｜根据本地时间获取当前月份(注意从0开始:0-Jan,1-Feb...)
·getSeconds         ｜根据本地时间获取当前秒数
·getTime            ｜获取UTC格式的从1970.1.1 0:00以来的毫秒数
·getTimezoneOffset ｜获取当前时间和UTC格式的偏移值(以分钟为单位)
·getUTCDate         ｜获取UTC格式的当前日期(本月的几号)
·getUTCDay          ｜获取UTC格式的今天是星期几(0-Sunday,1-Monday...)
·getUTCFullYear     ｜获取UTC格式的当前年份(四位数字)
·getUTCHours        ｜获取UTC格式的当前小时数(24小时制,0-23)
·getUTCMilliseconds ｜获取UTC格式的当前毫秒数
·getUTCMinutes      ｜获取UTC格式的当前分钟数
·getUTCMonth        ｜获取UTC格式的当前月份(注意从0开始:0-Jan,1-Feb...)
·getUTCSeconds      ｜获取UTC格式的当前秒数
·getYear            ｜根据本地时间获取当前缩写年份(当前年份减去1900)
·setDate            ｜设置当前日期(本月的几号)
·setFullYear        ｜设置当前年份(四位数字)
·setHours           ｜设置当前小时数(24小时制,0-23)
·setMilliseconds    ｜设置当前毫秒数
·setMinutes         ｜设置当前分钟数
·setMonth           ｜设置当前月份(注意从0开始:0-Jan,1-Feb...)
·setSeconds         ｜设置当前秒数
·setTime            ｜设置UTC格式的从1970.1.1 0:00以来的毫秒数
·setUTCDate         ｜设置UTC格式的当前日期(本月的几号)
·setUTCFullYear     ｜设置UTC格式的当前年份(四位数字)
·setUTCHours        ｜设置UTC格式的当前小时数(24小时制,0-23)
·setUTCMilliseconds ｜设置UTC格式的当前毫秒数
·setUTCMinutes      ｜设置UTC格式的当前分钟数
·setUTCMonth        ｜设置UTC格式的当前月份(注意从0开始:0-Jan,1-Feb...)
·setUTCSeconds      ｜设置UTC格式的当前秒数
·setYear            ｜设置当前缩写年份(当前年份减去1900)
·toString           ｜将日期时间值转换成"日期/时间"形式的字符串值
·Date.UTC           ｜返回指定的UTC格式日期时间的固定时间值

页面js直接得到系统动态时间完整示例：

<!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=utf-8" />
<title>JS实时显示时间</title>
</head>
<body>
<div id="localtime"></div>
<script type="text/javascript">
function showLocale(objD)
{
  var str,colorhead,colorfoot;
  var yy = objD.getYear();
   if(yy<1900) yy = yy+1900;
  var MM = objD.getMonth()+1;
   if(MM<10) MM = '0' + MM;
  var dd = objD.getDate();
   if(dd<10) dd = '0' + dd;
  var hh = objD.getHours();
   if(hh<10) hh = '0' + hh;
  var mm = objD.getMinutes();
   if(mm<10) mm = '0' + mm;
  var ss = objD.getSeconds();
   if(ss<10) ss = '0' + ss;
  var ww = objD.getDay();
   if ( ww==0 ) colorhead="<font color=\"#FF0000\">";
   if ( ww > 0 && ww < 6 ) colorhead="<font color=\"#373737\">";
   if ( ww==6 ) colorhead="<font color=\"#008000\">";
   if (ww==0) ww="星期日";
   if (ww==1) ww="星期一";
   if (ww==2) ww="星期二";
   if (ww==3) ww="星期三";
   if (ww==4) ww="星期四";
   if (ww==5) ww="星期五";
   if (ww==6) ww="星期六";
   colorfoot="</font>"
    str = colorhead + yy + "年" + MM + "月" + dd + "日" + hh + ":" + mm + ":" + ss + " " + ww + colorfoot;
   //alert(str);
			return str;
}
function tick()
{
  var today;
  today = new Date();
  document.getElementById("localtime").innerHTML = showLocale(today);
  window.setTimeout("tick()", 1000);
}
tick();
</script>
</body>
</html>

运行效果如下图所示：

PS：对JavaScript时间与日期操作感兴趣的朋友还可以参考本站在线工具：

Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime

在线世界各地时间查询：
http://tools.jb51.net/zhuanhuanqi/worldtime

在线万年历日历：
http://tools.jb51.net/bianmin/wannianli

网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli

更多关于JavaScript相关内容可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

js实现动态显示时间效果

话不多说,请看代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>时间显示器</title> </head> <body> <div id="d"></div> <script type="text/javascript"> var nowT
JS实现日期时间动态显示的方法

本文实例讲述了JS实现日期时间动态显示的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>js日期时间动态显示</title> </head> <body> <div id='jnkc'></div> <script>setInterval("jnkc.innerHTML=new Date().toLocaleString
JS时间控制实现动态效果的实例讲解

如下所示: <script> BOM //Bowers Object Model 浏览器对象模型 setTimeout() // 延迟执行一次 setInterval() // 间隔执行 var a = 300; window.setTimeout('abc(a)',3000); // 自定义函数赋值 function abc(i) { alert(i); } //setInterval('alert(123)',2000); var dh = document.getElementById(
纯js实现动态时间显示

本文实例为大家分享了js动态时间显示的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js动态时间显示 </title> </head> <body id = "show"> <script> function run(){ var time = ne
纯JS实现动态时间显示代码

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script language="javascript">
js显示动态时间的方法详解

本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的
JS获取动态添加元素的方法详解

本文实例讲述了JS获取动态添加元素的方法.分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1. 在模板引擎里面添加行内事件 2. 利用事件的委托获取(常用) 3. 在ajax的监听响应完成函数后面获取一在模板引擎里面添加行内事件添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素.  <script id=&q
p5.js临摹动态图形实现方法详解

使用p5.js临摹一个动态图形并作出拓展,供大家参考,具体内容如下原图形由内向外,白色圆的半径依次增大,黑色圆的半径不变: 白色圆在上一个白色圆碰到之前就开始增大半径: 图中只能存在一个周期的变化: 临摹图形使用P5.js,依照上文的规律进行临摹画12对圆: 相邻圆之间半径差为25: 白色圆半径以周期为60帧的正弦函数的正数值部分变化,变化幅度为22: 相邻白色圆运动函数相位差为13帧: 代码如下: function setup() { createCanvas(400, 400); f
基于python时间处理方法(详解)

在处理数据和进行机器学习的时候,遇到了大量需要处理的时间序列.比如说:数据库读取的str和time的转化,还有time的差值计算.总结一下python的时间处理方面的内容. 一.字符串和时间序列的转化 time.strptime():字符串=>时间序列 time.strftime():时间序列=>字符串 import time start = "2017-01-01" end = "2017-8-12" startTime = time.strptime
基于js对象,操作属性、方法详解

一,概述在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很
SpringBoot设置动态定时任务的方法详解

之前写过文章记录怎么在SpringBoot项目中简单使用定时任务,不过由于要借助cron表达式且都提前定义好放在配置文件里,不能在项目运行中动态修改任务执行时间,实在不太灵活. 经过网上搜索学习后,特此记录如何在SpringBoot项目中实现动态定时任务. 因为只是一个demo,所以只引入了需要的依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <ar
原生js封装的一些jquery方法(详解)

用js封装一些常用的jquery方法记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
Linux中使用NTP保持精确时间的方法详解

前言如何保持正确的时间,如何使用 NTP 和 systemd 让你的计算机在不滥用时间服务器的前提下保持同步.下面话不多说了,来一起看看详细的介绍吧. 它的时间是多少? 让 Linux 来告诉你时间的时候,它是很奇怪的.你可能认为是使用 time 命令来告诉你时间,其实并不是,因为 time 只是一个测量一个进程运行了多少时间的计时器.为得到时间,你需要运行的是 date 命令,你想查看更多的日期,你可以运行 cal 命令.文件上的时间戳也是一个容易混淆的地方,因为根据你的发行版默认情况不同,
D3.js实现折线图的方法详解

前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>
JS延时提示框实现方法详解

本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi

js显示动态时间的方法详解

相关推荐

随机推荐