JS倒计时
最近学JavaScript,为图方便学了一点简单语法便直接学JQuery框架啦,听其他网友说直接学框架不好,容易学懒,呵呵,我管不了这么多啦,已经工作啦,总有中身不由己的感觉,怎么上手快就怎么学。为弥补,就多看一些js代码啦。现在就言归正传,用js写一个倒计时的程序。
<title> 倒计时效果 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script language="JavaScript">
var TotalMinutes = 5;
var TotalMilliSeconds = 5*60*1000;
function takeCount()
{
//计数减一
TotalMilliSeconds -= 1000;
//计算时分秒
var hours = Math.floor( TotalMilliSeconds / ( 1000 * 60 * 60 )) % 24;
var minutes = Math.floor(TotalMilliSeconds / (1000 * 60)) % 60;
var seconds = Math.floor(TotalMilliSeconds / 1000) % 60;
//将时分秒插入到html中
document.getElementById("RemainH").innerHTML = hours;
document.getElementById("RemainM").innerHTML = minutes;
document.getElementById("RemainS").innerHTML = seconds;
}
window.onload = setInterval("takeCount();",1000);
</script>
</head>
<body>
<div id="CountMsg">
倒计时还有:
<strong id="RemainD"></strong><strong id="RemainH">XX</strong>时
<strong id="RemainM">XX</strong>分
<strong id="RemainS">XX</strong>秒
</div>
</body>
</html>
知识准备:
JavaScript的Date对象
Date对象表示日期和时间,他是自1970年1月1日0时0分0秒起记录的一个以毫秒为单位的数值,通过这个数值能推算出具体的日期时间。
构造函数:Date()以当前的日期时间构造一个对象,也可以指定年、月、日、时、分、秒、毫秒来初始化一个对象实例。(换算关系:日24时60分60秒1000毫秒)
Parse方法:静态方法,使用类名访问,采用实例无法访问。取1970年之后的毫秒值。
其他方法:getYear()方法:取对象实例中的年数。
getMonth()方法:取月份数(0-11)。
getDate()方法:取日、号数。
getDay()方法:取星期几。
getHours()方法:取小时数。
getMinutes()方法:取分钟数。
getSeconds()方法:取秒数。
getMilliSeconds()方法:取毫秒数。
另外JavaScript还提供了与get方法相对应set方法。
setInterval()函数:
setInterval("函数();",间隔时间); //每间隔时间触发一次。
不同与setTimeout("函数();",间隔时间); //间隔时间后触发函数,只触发一次。
以下是源代码:
<title> 倒计时效果 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script language="JavaScript">
var TotalMinutes = 5;
var TotalMilliSeconds = 5*60*1000;
function takeCount()
{
//计数减一
TotalMilliSeconds -= 1000;
//计算时分秒
var hours = Math.floor( TotalMilliSeconds / ( 1000 * 60 * 60 )) % 24;
var minutes = Math.floor(TotalMilliSeconds / (1000 * 60)) % 60;
var seconds = Math.floor(TotalMilliSeconds / 1000) % 60;
//将时分秒插入到html中
document.getElementById("RemainH").innerHTML = hours;
document.getElementById("RemainM").innerHTML = minutes;
document.getElementById("RemainS").innerHTML = seconds;
}
window.onload = setInterval("takeCount();",1000);
</script>
</head>
<body>
<div id="CountMsg">
倒计时还有:
<strong id="RemainD"></strong><strong id="RemainH">XX</strong>时
<strong id="RemainM">XX</strong>分
<strong id="RemainS">XX</strong>秒
</div>
</body>
</html>