js实现的可以自动刷新的时间日期代码实例

js实现的可以自动刷新的时间日期代码实例:
可以自动刷新的时间日期效果在很多网页都在使用,因为能够让页面更加动感一些,也更加人性化,用户可以实时查看页面的时间,下面就通过代码实例介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function getTime(){
  var odate=new Date();
  var date=odate.toLocaleDateString();
  var hours=odate.getHours();
  var minutes=odate.getMinutes();
  var seconds=odate.getSeconds();
  $("#showDate").html(date+" "+(hours>9?hours:"0"+hours)+":"
  +(minutes>9?minutes:"0"+minutes)+":"
  +(seconds>9?seconds:"0"+seconds));
}
$(function(){
  setInterval("getTime();",1000);
})
</script>
</head>
<body>
<div id="showDate"></div>
</body>
</html>

上面的代码实现了实现时间日期的自动刷新效果,下面介绍一下它的实现过程。
一.代码注释:
1.function getTime(){},此函数可以获取当前的时间日期。
2.var odate=new Date(),创建当前时间日期对象。
3.var date=odate.toLocaleDateString(),可以获取本地年月日。
4.var hours=odate.getHours(),获取小时。
5.var minutes=odate.getMinutes(),获取分钟。
6.var seconds=odate.getSeconds(),获取秒。
7.$("#showDate").html(date+" "+(hours>9?hours:"0"+hours)+":"+(minutes>9?minutes:"0"+minutes)+":"+(seconds>9?seconds:"0"+seconds)),将当前的时间日期写入指定的元素,当然这里是div,这是使用三元运算符是为了实现当小时、分钟和秒为个位数时,前面加0。
8.$(function(){setInterval("getTime();",1000);}) ,每秒执行一次指定的函数。
二.相关阅读:
1.关于时间对象可以参阅ECMAScript的Date对象一章节。 
2.三元运算符可以参阅三元运算符用法详解一章节。 
3.setInterval()函数可以参阅setInterval()函数用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14636

更多内容可以参阅:http://www.softwhy.com/jquery/

时间: 2024-12-21 08:42:29

js实现的可以自动刷新的时间日期代码实例的相关文章

js实现的实时自动更新的时间效果

js实现的实时自动更新的时间效果:在很多网站的页面某个地方,比如概率最多的就是网页顶部,会有一个时间能够自动更新的模块,这也算是比较任性的举措,不过有没有一般对人的影响不大,因为电脑本身就会带有时间,并且这个时间也基本是读取的本机系统的事件,不过既然有这样的需要,就介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

网页页面实现自动刷新的3种代码

网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面? 其实实现这个效果非常地基本,而且这个效果甚至不能称之为特殊效果.你只要把如下代码加入你的网页中就可以了. 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equi

js实现的解析xml文件和xml字符串代码实例

js实现的解析xml文件代码实例:下面分享一段代码实例,它实现了对xml文件的解析作用.代码如下: loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览器的类型 //支持IE浏览器 if(!window.DOMParser && window.ActiveXObject){ var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsof

java_js_method实现输入小写字母自动转化成大写的代码实例

方法一: <!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="Con

时间日期判断实例

直接看代码吧: //  Created by cctv on 15/8/7. //  Copyright (c) 2015年 cctv. All rights reserved. // #import "NSString+add.h" #import "NSDate+add.h" @implementation NSString (add) + (NSString *)stringWithDateString:(NSString*) dateString {   

java获取时间日期代码

public class test1 { public  static void main(String[] args){ SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd "); //设置日期格式 System.out.println(df.format(new Date())); //输出当前时间 Calendar c = Calendar.getInstance(); //设置日期格式 System.out.printl

网页时间日期代码

<SCRIPT language=JavaScript>newDays=new Array()newDays[0]="日"newDays[1]="一"newDays[2]="二"newDays[3]="三"newDays[4]="四"newDays[5]="五"newDays[6]="六"the_date=new Date()with(the_date)d

打开页面自动刷新网页,自动刷新当前页面,JS调用

reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和"后退"来访问已经被替换

js跳转方法整理与自动刷新

js方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/javascript"> window.location.href="target.aspx"; </script> 2.window.navigate方式跳转 <script language="javascript"> window.nav