网页倒计时特效代码_时间倒计时代码

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>

导航:首页 > 编程语言 > 网页倒计时特效代码

网页倒计时特效代码

与网页倒计时特效代码相关的资料

友情链接