jQuery/javascript倒计时代码总结
具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span class="timespan"></span>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
var starttime = new Date("2017/11/20");
setInterval(function () {
var nowtime = new Date();
var time = starttime - nowtime;
var day = parseInt(time / 1000 / 60 / 60 / 24);
var hour = parseInt(time / 1000 / 60 / 60 % 24);
var minute = parseInt(time / 1000 / 60 % 60);
var seconds = parseInt(time / 1000 % 60);
$('.timespan').html(day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒");
}, 1000);
</script>
</html>
jQuery实现倒计时跳转的例子：
<!-可以复制代码并保存到文件中，注意引入jquery.js文件。->
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>跳转页面</title>
<script src="jquery.js"></script>
<script language="javascript"><!--
$(document).ready(function() {
function jump(count) {
window.setTimeout(function(){
count--;
if(count > 0) {
$('#num').attr('innerHTML', count);
jump(count);
} else {
location.href="https://www.365jz.com";
}
}, 1000);
}
jump(3);
});
// --></script>
</head>
<body>
<span style="color:red">欢迎来到365建站网！</span><br/>www.365jz.com页面将在3秒后跳转...<br/>还剩<span id="num">3</span>秒
</body>
</html>
二.javascript倒计时代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单易用的javascript倒计时代码</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:18px; text-align:center;}
.time{ height:30px; padding:200px;}
</style>
</head>
<body>
<div class="time">
<span id="t_d">00天</span>
<span id="t_h">00时</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</div>
<script>
function GetRTime(){
var EndTime= new Date('2014/09/20 00:00:00');
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
var d=0;
var h=0;
var m=0;
var s=0;
if(t>=0){
d=Math.floor(t/1000/60/60/24);
h=Math.floor(t/1000/60/60%24);
m=Math.floor(t/1000/60%60);
s=Math.floor(t/1000%60);
}
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(GetRTime,0);
</script>
</body>
</html>
三.比较全的JavaScript倒计时脚本
1. 比较长时间的倒计时：
<p>离<span id="next_yeat">2019</span>年还有：
</p>
<form name="form1">
<input type="textarea" name="left" size="35" style="text-align:center; font-size:18px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; border:none;">
</form>
<p><input type="button" onclick="stopclock()" value=" 暂停 "> <input type="button" onclick="startclock()" value=" 继续 "></p>
<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>
效果：
2. 小时倒计时（短时间倒计时）
<p id="timer" style="color:red; font-size:14px; font-family:Arial;"></p>
<script type="text/javascript">
<!--
//一个小时，按秒计算，可以自己调整时间
var maxtime = 60*60
function CountDown()
{
if(maxtime>=0)
{
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "距离结束还有 "+minutes+" 分 "+seconds+" 秒";
document.all["timer"].innerHTML=msg;
if(maxtime == 5*60) alert('注意，还有5分钟!');
--maxtime;
}
else
{
clearInterval(timer);
alert("时间到，结束!");
}
}
timer = setInterval("CountDown()",1000);
//-->
</script>
3. 最简倒计时
<script language="JavaScript">
<!-- Begin
var timedate= new Date("January 14,2012");
var times="2012";
var now = new Date();
var date = timedate.getTime() - now.getTime();
var time = Math.floor(date / (1000 * 60 * 60 * 24));
if (time >= 0) ;
document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");
// End -->
</script>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
