JavaScript实现动态时间效果

DBear

浏览: 231144 次
性别:
来自: 上海

最近访客更多访客>>

oracle1234

进击的小白

chw751039

Sdky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端技术

JavaScript IE XHTML CSS HTML

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

<head>

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

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

<head>

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

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>

分享到：

浏览器脚本兼容总结（持续更新） | CSS布局：两列，左边宽度自适应，右边宽度 ...

2011-01-21 00:28
浏览 3677
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论