JavaScript兑现动态时间效果
日期：2014-05-16 浏览次数：20360 次
首先说明JavaScript日期相关的一些操作。
1.创建日期对象 ?
?? var dateObj = new Date()//返回当前系统时间，Thu Jan 20 2011 23:25:24 GMT+0800
2.获取时针数字
?? dateObj.getHours() // 23
?
3.获取分针数字
?? dateObj.getMinutes() //25
?
4.获取秒针数字
?? dateObj.getSeconds() //24
?
5.获取星期几
?? dateObj.getDay() // 4
?
6.获取日期
?? dateObj.getDate() // 20
?
7.获取月份
?? dateObj.getMonth() // 0, 月份的索引由0开始，因此，如果返回0，则需加1才得出真正的月份
?
8.获得年份
??(1) dateObj.getYear()
??关于这个方法要特殊说明一下，这个方法的返回值在firefox和IE中不同：在标准浏览器中都返回 111,因为标准的计算起始年份是从1900年，因此需要加上1900才得出真正的年份；而在IE中，直接返回2011，无需特别操作。
??所以此处要做浏览器类型判断，具体判断方法参见这里。
??(2) dateObj.getFullYear()/dateObj.getUTCFullYear()
??使用这个方法就不用想上述方法那样麻烦，可以直接返回正确的年份。
?
?
动态时间效果一：YYYY-MM-DD hh:mm:ss
?
?
?
<!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>电子时钟</title>?
</head>?
<style type="text/css">?
#showtime{?background:#333;?color:#FFF;?height:30px;?line-height:30px;?font-size:12px;?textindent:30px;?width:250px;?border:2px #999 solid;?}?
#localtime{?margin-lift:10px;?color:#CCC;?}?
</style>?
<body>?
<div id="showtime">?
<span id="localtime"></span>?
</div>?
<script language="javascript">?
function showLocale(objD)?
{?
var str;?
var hh = objD.getHours();?
var mm = objD.getMinutes();?
var ss = objD.getSeconds();?
var month = objD.getMonth()+1;
var date = objD.getDate();
?
if(hh<10)hh='0'+hh;?
if(mm<10)mm='0'+mm;?
if(ss<10)ss='0'+ss;?
if(month<10)month='0'+month;
if(date<10)date = '0' + date;
?
var year =?objD.getFullYear();
?
str=year+"年";
str+=month+"-"+date+" ";?
?
?
str+= hh+":"+mm+":"+ss;?
return(str);?
}?
?
function tick()?
{?
var today;?
today=new Date();?
document.getElementById("localtime").innerHTML=showLocale(today);?
}?
?
window.setInterval("tick()",1000);?
?
</script>?
</body>?
</html>
?
?
动态时间效果二：倒计时，DD天hh小时mm分钟ss秒
?
?
<!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>电子时钟</title>?
</head>?
<style type="text/css">?
