前几天老大说自己来写倒计时的,可今天还是分到我的手里了。
效果还是不错的吧。还没有上线,不然就提供连接给看官们看看js实现倒计时的效果了。
代码如下 |
复制代码 |
<script>
window.onload=countdown();
function countdown(time){
var djs = time;
var b=Math.round(new Date().getTime()/1000);
var cc = djs-b;
var d = Math.floor(cc/(3600*24));
var h = Math.floor( (cc-d*3600*24)/3600 );
var m = Math.floor(((cc-d*3600*24-h*3600))/60);
var s = Math.floor(cc-d*3600*24-h*3600-m*60);
$('#daya').html(d);
$('#hoursa').html(h);
$('#minua').html(m);
$('#secoa').html(s);
setTimeout("countdown()",1000);
}
</script>
|
代码还是比较精简的。看到网上一大推JS倒计时。可没有适合自己的。就参看别人的自己写了js倒计时代码
附在学习过程中用搜索到的倒计时代码
代码如下 |
复制代码 |
<!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>JS实现倒计时(时、分,秒)</title>
<script language="javascript" type="text/javascript">
var interval = 1000;
function ShowCountDown(year,month,day,divname)
{
var now = new Date();
var endDate = new Date(year, month-1, day);
var leftTime=endDate.getTime()-now.getTime();
var leftsecond = parseInt(leftTime/1000);
//var day1=parseInt(leftsecond/(24*60*60*6));
var day1=Math.floor(leftsecond/(60*60*24));
var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
var cc = document.getElementById(divname);
cc.innerHTML = "脚本之家提示距离"+year+"年"+month+"月"+day+"日还有:"+day1+"天"+hour+"小时"+minute+"分"+second+"秒";
}
window.setInterval(function(){ShowCountDown(2010,4,20,'divdown1');}, interval);
</script>
</head>
<body>
<div id="divdown1"></div>
</body>
</html>
|
例2
代码如下 |
复制代码 |
<script type="text/javascript">
startclock();
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
var year = Today.getFullYear();
document.getElementById("next_yeat").innerHTML = year + 1;
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowMonth = Today.getMonth();
var NowDate = Today.getDate();
var NowYear = Today.getYear();
var NowSecond = Today.getSeconds();
if (NowYear <2000)
NowYear=1900+NowYear;
Today = null;
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinute
Secondleft = 59 - NowSecond
Yearleft = year - NowYear
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate
if (Secondleft<0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if (Minuteleft<0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if (Hourleft<0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if (Dateleft<0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if (Monthleft<0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒';
document.form1.left.value=Temp;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
var timerID = null;
var timerRunning = false;
function stopclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
// -->
</script>
|
最后这个是本人参考写的一个
代码如下 |
复制代码 |
<div id="m1"></div>
<script type="text/javascript">
window.onload=function(){daojishi()};
function daojishi()
{
var day=hour=minitus=second=ms=0;
var year=new Date().getFullYear()+1;
var endtime = new Date(year,0,1); //结束时间
var todaytime = new Date(); //当前时间
var tmp=endtime-todaytime;
day=Math.floor(tmp/86400000);
tmp=(new Date(year,0,1)-new Date())%86400000;
hour=Math.floor(tmp/3600000);
tmp%=3600000;
minitus=Math.floor(tmp/60000);
tmp%=60000;
second=Math.floor(tmp/1000);
var str = "距离"+year+"年还有 "+day+" 天 "+hour+" 小时 "+minitus+" 分 "+second+" 秒 ";
document.getElementById("m1").innerHTML= str;
setTimeout("daojishi()",1000);
}
</script>
|
显示的距离2014年还有 35 天 8 小时 26 分 47 秒 |