网站地图    收藏   

主页 > 前端 > javascript >

简单的Javascript倒计时代码

来源:自学PHP网    时间:2014-09-19 14:48 作者: 阅读:

[导读] 倒计时很简单就是利用js new date()来创建珍上时间,然后再利用settimeout进来定时更新div中数字即可解决了,下面我来介绍一倒计时代码都基于这个原理实例的。...

前几天老大说自己来写倒计时的,可今天还是分到我的手里了。

效果还是不错的吧。还没有上线,不然就提供连接给看官们看看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 秒

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论