jQuery/javascript倒計(jì)時(shí)代碼總結(jié)
具體代碼如下所示：
<!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 + "小時(shí)" + minute + "分鐘" + seconds + "秒");
}, 1000);
</script>
</html>
jQuery實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)的例子：
<!-可以復(fù)制代碼并保存到文件中，注意引入jquery.js文件。->
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>跳轉(zhuǎn)頁(yè)面</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="http://theartemis.cn";
}
}, 1000);
}
jump(3);
});
// --></script>
</head>
<body>
<span style="color:red">歡迎來(lái)到365建站網(wǎng)！</span><br/>theartemis.cn頁(yè)面將在3秒后跳轉(zhuǎn)...<br/>還剩<span id="num">3</span>秒
</body>
</html>
二.javascript倒計(jì)時(shí)代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡(jiǎn)單易用的javascript倒計(jì)時(shí)代碼</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時(shí)</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 + "時(shí)";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(GetRTime,0);
</script>
</body>
</html>
三.比較全的JavaScript倒計(jì)時(shí)腳本
1. 比較長(zhǎng)時(shí)間的倒計(jì)時(shí)：
<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=" 繼續(xù) "></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+'小時(shí), '+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. 小時(shí)倒計(jì)時(shí)（短時(shí)間倒計(jì)時(shí)）
<p id="timer" style="color:red; font-size:14px; font-family:Arial;"></p>
<script type="text/javascript">
<!--
//一個(gè)小時(shí)，按秒計(jì)算，可以自己調(diào)整時(shí)間
var maxtime = 60*60
function CountDown()
{
if(maxtime>=0)
{
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "距離結(jié)束還有 "+minutes+" 分 "+seconds+" 秒";
document.all["timer"].innerHTML=msg;
if(maxtime == 5*60) alert('注意，還有5分鐘!');
--maxtime;
}
else
{
clearInterval(timer);
alert("時(shí)間到，結(jié)束!");
}
}
timer = setInterval("CountDown()",1000);
//-->
</script>
3. 最簡(jiǎn)倒計(jì)時(shí)
<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>現(xiàn)在離 "+times+" 還有: <b>"+time +"</b> 天</p>");
// End -->
</script>
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
