網頁倒計時特效代碼_時間倒計時代碼

A. 純jsp實現的倒計時動態顯示效果完整代碼

本文實例講述了純jsp實現的倒計時動態顯示效果代碼。分享給大家供大家參考，具體如下：
<%@
page
language="java"
import="java.util.*"
pageEncoding="UTF-8"%>
<div
id="showTimes"></div>
<%
long
current_time=System.currentTimeMillis();
long
end_time=1337875200000l;
long
time=end_time-current_time;
%>
<script>
var
second
=
<%=
time
/
1000%>;
//
剩餘秒數
//
寫一個方法，將秒數專為天數
var
toDays
=
function(){
var
s
=
second
%
60;
//
秒
var
mi
=
(second
-
s)
/
60
%
60;
//
分鍾
var
h
=
((second
-
s)
/
60
-
mi
)
/
60
%
24;
//
小時
var
d
=
(((second
-
s)
/
60
-
mi
)
/
60
-
h
)
/
24
//
天
return
"剩餘："
+
d
+
"天"
+
h
+
"小時"
+
mi
+
"分鍾"
+
s
+
"秒";
}
//然後寫一個定時器
window.setInterval(function(){
second
--;
document.getElementById("showTimes").innerHTML
=
toDays
();
},
1000);
</script>
希望本文所述對大家JSP程序設計有所幫助。

B. jquery如何實現倒計時效果

首先獲取當前時間與目標時間的時間差，然後通過定時器更新這個時間差，就實現了倒計時效果。實現上述過程需要以下兩個函數：

getTime()//返回距1970年1月1日之間的毫秒數，這樣將時間差（毫秒數）÷3600÷24即為天數，時分秒類似
setTimeout(code,millisec);//在指定的毫秒數後調用函數

實例演示如下

創建Html元素

<divclass="box">
	<span>距離2015年國慶節還剩：</span><br>
	<divclass="content">
		<inputtype="text"id="time_d">天<inputtype="text"id="time_h">時<inputtype="text"id="time_m">分<inputtype="text"id="time_s">秒
	</div>
</div>

設置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}
input[type='text']{width:45px;height:35px;padding:5px10px;margin:5px0;border:1pxsolid#ff9966;}

編寫jquery代碼

$(function(){
	show_time();
});

functionshow_time(){
	vartime_start=newDate().getTime();//設定當前時間
	vartime_end=newDate("2015/10/0100:00:00").getTime();//設定目標時間
	//計算時間差
	vartime_distance=time_end-time_start;
	//天
	varint_day=Math.floor(time_distance/86400000)
	time_distance-=int_day*86400000;
	//時
	varint_hour=Math.floor(time_distance/3600000)
	time_distance-=int_hour*3600000;
	//分
	varint_minute=Math.floor(time_distance/60000)
	time_distance-=int_minute*60000;
	//秒
	varint_second=Math.floor(time_distance/1000)
	//時分秒為單數時、前面加零
	if(int_day<10){
		int_day="0"+int_day;
	}
	if(int_hour<10){
		int_hour="0"+int_hour;
	}
	if(int_minute<10){
		int_minute="0"+int_minute;
	}
	if(int_second<10){
		int_second="0"+int_second;
	}
	//顯示時間
	$("#time_d").val(int_day);
	$("#time_h").val(int_hour);
	$("#time_m").val(int_minute);
	$("#time_s").val(int_second);
	//設置定時器
	setTimeout("show_time()",1000);
}

觀察效果

某個時刻的截圖

C. 一些網頁的特效怎樣製作具體見問題補充

倒計時

把如下代碼復制到<head>與</head>之間

<script language="JavaScript">
var DifferenceHour = -1
var DifferenceMinute = -1
var DifferenceSecond = -1
var Tday = new Date("February 6, 2008 23:59:59")
/* 上面括弧中為要到達的日期，括弧中左邊為月和日，月份要用英文，右邊為年份和具體時鍾~

下面是各月份中英文對照

一月 January

二月 February

三月 March

四月 April

五月 May

六月 Jun

七月 July

八月 August

九月 September

十月 October

十一月 November

十二月 December
*/
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000

function clock()
{
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var timevalue = ""+((hour > 12) ? hour-12:hour)
timevalue +=((minute < 10) ? ":0":":")+minute
timevalue +=((second < 10) ? ":0":":")+second
timevalue +=((hour >12 ) ? " PM":" AM")
// document.formnow.now.value = timevalue
var convertHour = DifferenceHour
var convertMinute = DifferenceMinute
var convertSecond = DifferenceSecond
var Diffms = Tday.getTime() - time.getTime()
DifferenceHour = Math.floor(Diffms / daysms)
Diffms -= DifferenceHour * daysms
DifferenceMinute = Math.floor(Diffms / hoursms)
Diffms -= DifferenceMinute * hoursms
DifferenceSecond = Math.floor(Diffms / Secondms)
Diffms -= DifferenceSecond * Secondms
var dSecs = Math.floor(Diffms / microsecond)
if(convertHour != DifferenceHour) document.formnow.dd.value=DifferenceHour
if(convertMinute != DifferenceMinute) document.formnow.hh.value=DifferenceMinute
if(convertSecond != DifferenceSecond) document.formnow.mm.value=DifferenceSecond
document.formnow.ss.value=dSecs
// document.formnow.Tnow.value= DifferenceHour DifferenceMinute + DifferenceSecond + dSecs
setTimeout("clock()",1000)
}
// end hiding -->
</script>

把如下代碼復制到<body>與</body>之間

<form name="formnow">
<p>還剩 <input type="text" name="dd" size=2> 天 <input type="text" name="hh" size=2> 小時 <input type="text" name="mm" size=2> 分 <input type="text" name="ss" size=2> 秒就到春節啦！</p></center>
</form>

背景更簡單了你添加一個圖片做背景不就成了

D. 求倒數5秒的網頁特效 5秒後跳轉新頁面在線等

content="5 是你設置的時間

<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://你要跳轉地址">
<title>404出錯啦！！！</title>
<style type="text/css">

</style>
</head>
<body>
<p></p>
<p align="center"><img src="404圖片.gif" alt="404" width="512" height="312" longdesc="http://地址"> </p>
<p align="center" class="STYLE10">您所訪問的頁面不存在或已被作者轉移，現轉入首頁，請稍後...</p>
<p align="center"><span class="STYLE10">若您的瀏覽器不支持自動跳轉，<a href="http://地址" target="_self" style="color:#FF3300"><strong>請點擊這里</strong></a></span></p>
</body>
</html>

E. 網頁設計如何做倒計時牌

<body>
<div id="timer"></div>
<script type="text/javascript" language="javascript">
var endDate=new Date(2010,11,11,17,05,40);//年月日時分秒，月要減去1
(function JiShi()
{
var now=new Date();
var oft=Math.round((endDate-now)/1000);
var ofd=parseInt(oft/3600/24);
var ofh=parseInt((oft%(3600*24))/3600);
var ofm=parseInt((oft%3600)/60);
var ofs=oft%60;
document.getElementById('timer').innerHTML='還有 '+ofd+' 天 ' +ofh+ ' 小時 ' +ofm+ ' 分鍾 ' +ofs+ ' 秒';
if(ofs<0){document.getElementById('timer').innerHTML='倒計時結束！';return;};
setTimeout('JiShi()',1000);
}());

</script>
</body>

修改成需要的時間段，直接嵌入就可以了~~~祝你愉快！

F. jquery做的倒計時特效如何把秒改成分鍾

G. JQuery實現的按鈕倒計時效果

本文實例講述了JQuery實現的按鈕倒計時效果。分享給大家供大家參考，具體如下：
一個實現了在按鈕上顯示倒計時，倒計時完畢自動將按鈕設置為不可用的效果，具體代碼如下：
<html>
<head>
<title>test
count
down
button</title>
<script
src="jquery1.8.3.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(function
()
{
$('#btn').click(function
()
{
var
count
=
10;
var
countdown
=
setInterval(CountDown,
1000);
function
CountDown()
{
$("#btn").attr("disabled",
true);
$("#btn").val("Please
wait
"
+
count
+
"
seconds!");
if
(count
==
0)
{
$("#btn").val("Submit").removeAttr("disabled");
clearInterval(countdown);
}
count--;
}
})
});
</script>
</head>
<body>
<input
type="button"
id="btn"
value="Submit"
/>
</body>
</html>
運行效果截圖如下：
希望本文所述對大家jQuery程序設計有所幫助。

H. 時間倒計時代碼

這是用抄VB寫的,需在窗體上襲放一個label控制項,如果你要用到自己程序里,裡面還需加一些大小判斷,請自己完善:
Private Sub Timer1_Timer()
Dim aa As Date
Dim bb As Date
aa = Now '一般用當前時間就可以了
bb = CDate("2006-11-30 11:38:33") '將來的時間
Label1.Caption = Year(bb) - Year(aa) & "年" & Month(bb) - Month(aa) & "月" & Day(bb) - Day(aa) & "天" & Hour(bb) - Hour(aa) & "小時" & Minute(bb) - Minute(aa) & "分鍾" & Second(bb) - Second(aa) & "秒鍾"
End Sub

I. 如何讓倒計時跳動（網頁特效）

<Script Language="JavaScript">

</Script>
<div id="stick1"></div>
<div id="stick2"></div>

導航:首頁 > 編程語言 > 網頁倒計時特效代碼

網頁倒計時特效代碼

與網頁倒計時特效代碼相關的資料

友情鏈接