JavaScript兑现动态时间效果 _JavaScript

JavaScript实现动态时间效果

首先说明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>?

<title>电子时钟</title>?

</head>?

#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>?

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>?

<title>电子时钟</title>?

</head>?

#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>?

function countDown(ls)?

?? var str; ? ?

?? var date = parseInt(ls/(24*60*60*1000)) ; ls = ls % 86400000;

?? var hh = parseInt(ls/3600000) ; ls = ls % 3600000;

?? var mm = parseInt(ls/60000) ;?

?? var ss = parseInt(Math.round(ls%60000)/1000);

?? if(hh<10)hh='0'+hh;?

?? if(mm<10)mm='0'+mm;?

?? if(ss<10)ss='0'+ss;?

?? if(date<10)date = '0' + date;

?? str="还有:"+date+"天"+hh+"小时"+mm+"分钟"+ss+"秒结束";?

?? return(str);?

function tick()?

var curTime = (new Date()).getTime(); //采用毫秒形式

var leftTime = endTime-curTime;

?if(leftTime>0){

?? document.getElementById("localtime").innerHTML=countDown(leftTime);?

?}else{

?? document.getElementById("localtime").innerHTML="已结束";?

?? clearInterval(tm);

var endTime= 1315140461784; //结束时间

var tm=setInterval(tick,1000);

</script>?

</body>?

</html>