JS倒计时
2009-03-04 11:33
441 查看
最近学JavaScript，为图方便学了一点简单语法便直接学JQuery框架啦，听其他网友说直接学框架不好，容易学懒，呵呵，我管不了这么多啦，已经工作啦，总有中身不由己的感觉，怎么上手快就怎么学。为弥补，就多看一些js代码啦。现在就言归正传，用js写一个倒计时的程序。
知识准备：
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("函数（）；"，间隔时间)； //间隔时间后触发函数，只触发一次。
以下是源代码：
Code
<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("函数（）；"，间隔时间)； //间隔时间后触发函数，只触发一次。
以下是源代码：
Code
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 