當前位置：首頁 » 操作系統 » html5倒計時源碼

html5倒計時源碼

發布時間: 2022-08-12 15:57:24

㈠ html頁面的倒計時代碼是什麼

<br>倒計時已結束<br>
<span id="span_dt_dt" style='border:1px solid black;background-color:#FFFFFF' ></span>
<SCRIPT language=javascript>
<!--
//document.write("");

function show_student163_time(){
window.setTimeout("show_student163_time()", 1000);
BirthDay=new Date("00-00-0000");//改成你的計時日期
today=new Date();
timeold=(BirthDay.getTime()-today.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML=daysold+"天"+hrsold+"小時"+minsold+"分"+seconds+"秒" ;

}
show_student163_time();
//-->
</SCRIPT>

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

㈡ HTML倒計時代碼

<form name="form1">
<div align="center" align="center">
<center>離2020年還有:<br>
<input type="textarea" name="left" size="35" style="text-align: center">
</center>
</div>
</form>
<script LANGUAGE="javascript">
startclock()
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
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 = 2009 - 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>
參考： http://www.cnblogs.com/jiangchongwei/archive/2009/09/29/1576268.html
網上有很多這樣的代碼。

㈢ 倒計時html代碼

倒計時的html代碼：

<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>CSS3圓環倒計時-源碼搜藏網</title>
<style>
.pie{width:200px;height:200px;background-color:blue;border-radius:100px;position:absolute;}
.pie1{clip:rect(0px,200px,200px,100px);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);background:-moz-radial-gradient(20%50%0deg,#333,#0000ff);background:-webkit-gradient(radial,100100,0,100100,110,from(#000),to(#0000ff));}
.pie2{clip:rect(0px,100px,200px,0px);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);background:-moz-radial-gradient(80%50%0deg,#333,#0000ff);background:-webkit-gradient(radial,100100,0,100100,110,from(#000),to(#0000ff));}
.hold{width:200px;height:200px;position:absolute;z-index:1;}
.hold1{clip:rect(0px,200px,200px,100px);}
.hold2{clip:rect(0px,100px,200px,0px);}
.bg{width:200px;height:200px;background-color:red;border-radius:100px;position:absolute;box-shadow:0px0px8px#333;background:-moz-radial-gradient(0%50%0deg,#900,#ff0000);background:-webkit-gradient(radial,100100,0,100100,110,from(#900),to(#ff0000));}
.time{width:160px;height:160px;margin:20px0020px;background-color:#fff;border-radius:100px;position:absolute;z-index:1;box-shadow:0px0px8px#333inset;text-align:center;line-height:160px;font-family:"BookAntiqua",Palatino,serif;font-size:35px;font-weight:bold;text-shadow:1px1px3px#333;}
.timeem{background:#fff;position:absolute;top:62px;left:12px;height:18px;width:140px;opacity:0.4;}
</style>
</head>
<body>
<divclass="holdhold1">
<divclass="piepie1"></div>
</div>
<divclass="holdhold2">
<divclass="piepie2"></div>
</div>
<divclass="bg"></div>
<divclass="time"><span></span><em></em></div>
<scriptsrc="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
i=0;
j=0;
count=0;
MM=4;
SS=59;
MS=9;
totle=(MM+1)*600;
d=180*(MM+1);
MM="0"+MM;
functionshowTime(){
	totle=totle-1;
	if(totle==0){
		clearInterval(s);
		clearInterval(t1);
		clearInterval(t2);
		$(".pie2").css("-o-transform","rotate("+d+"deg)");
		$(".pie2").css("-moz-transform","rotate("+d+"deg)");
		$(".pie2").css("-webkit-transform","rotate("+d+"deg)");
	}else{
		if(totle>0&&MS>0){
			MS=MS-1;
			if(MS<10){MS="0"+MS};
		};
		if(MS==0&&SS>0){
			MS=10;
			SS=SS-1;
			if(SS<10){SS="0"+SS};
		};
		if(SS==0&&MM>0){
			SS=60;
			MM=MM-1;
			if(MM<10){MM="0"+MM};
		};
	};
	$(".timespan").html(MM+":"+SS+":"+MS);
};
s=setInterval("showTime()",100);
functionstart1(){
	i=i+0.6;
	count=count+1;
	if(count==300){
		count=0;
		clearInterval(t1);
		t2=setInterval("start2()",100);
	};
	$(".pie1").css("-o-transform","rotate("+i+"deg)");
	$(".pie1").css("-moz-transform","rotate("+i+"deg)");
	$(".pie1").css("-webkit-transform","rotate("+i+"deg)");
};
functionstart2(){
	j=j+0.6;
	count=count+1;
	if(count==300){
		count=0;
		clearInterval(t2);
		t1=setInterval("start1()",100);
	};
	$(".pie2").css("-o-transform","rotate("+j+"deg)");
	$(".pie2").css("-moz-transform","rotate("+j+"deg)");
	$(".pie2").css("-webkit-transform","rotate("+j+"deg)");
};
t1=setInterval("start1()",100);
</script>
<inputonclick="window.open('view-source:'+window.location.href)"type="button"value="查看源代碼"style="position:absolute;right:0;top:0;width:80px;height:30px;">
</body>
</html>

直接復制代碼，創建html文件，然後復制進去，就可以看到效果了。

㈣ 在html頁面加一個倒計時90分鍾代碼怎麼寫

<html>
<head>
</head>
<body>
<div id="timeshow">
</div>
<script type="text/javascript">
var time=new Date();
time.setHours(1);
time.setMinutes(30);
time.setSeconds(0);
var timeout;
var timeshow=document.getElementById("timeshow");
function countdown(){
var hour=time.getHours();
var min=time.getMinutes();
var second=time.getSeconds();
if(hour=="0"&&min=="0"&&second=="0"){alert("Time Out!");clearInterval(timeout);}
time.setSeconds(second-1);
hour<10?hour="0"+hour:hour;
min<10?min="0"+min:min;
second<10?second="0"+second:second;
timeshow.innerHTML=hour+":"+min+":"+second;
}
timeout= setInterval(countdown,1000);
</script>
</body>
</html>

初學菜鳥 編的不好請指教

㈤ html頁面的倒計時代碼。。。。急求！！！！

<br>倒計時已結束<br>
<span id="span_dt_dt" style='border:1px solid black;background-color:#FFFFFF' ></span>
<SCRIPT language=javascript>
<!--
//document.write("");
function show_time(){
window.setTimeout("show_time()", 1000);
BirthDay=new Date("00-00-0000");//改成你的計時日期
today=new Date();
timeold=(BirthDay.getTime()-today.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML=daysold+"天"+hrsold+"小時"+minsold+"分"+seconds+"秒" ;
}
show_time();
//-->
</SCRIPT>
修改成需要的時間段，直接嵌入就可以。

㈥ html倒計時按鈕代碼

<inputtype="button"value="倒計時"
onClick="timedMsg()">
<p>請閱讀通告:</p>
<pid="showtime"></p>
<scripttype="text/javascript">
varc=5;
vart;
functiontimedMsg()
{
document.getElementById('showtime').innerHTML=c;
	if(c==0){
		clearTimeout(t);
		window.location.href="url";//為跳轉地址
	}else{
	t=setTimeout('timedMsg()',1000);
	}
	c--;
}
</script>

//這樣即可 這是點擊按鈕開始倒計時，如果要是頁面載入就開始的話，直接給body加onload事件即可

㈦ 求html倒計時的代碼！

<!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>

㈧ 求html網頁高手 倒計時代碼！

不知道對不對啊 你看看啊
<HTML>
<HEAD>
<TITLE>時間日期篇--倒計時1</TITLE>
</HEAD>

<BODY bgcolor="#fef4d2" onLoad=DownCount()>

<br><br>
<center>
<font color="ffaafa"><h2>時間日期篇--倒計時1</h2></font>
<hr width=300>
<br><br>

<!-- 案例代碼1開始 -->

<script language=JavaScript>

<!-- [Step1]: 這里可以設置倒計時的月日年 -->
var theDay = new Date("January 1, 2008")
var DayALL

function DownCount(){
var today = new Date()
var seconds = Math.floor((theDay.getTime() - today.getTime())/1000)
var minutes = Math.floor(seconds/60)
var hours = Math.floor(minutes/60)
var days = Math.floor(hours/24)
CDay= days
CHour= hours % 24
CMinute= minutes % 60
CSecond= seconds % 60
DayALL = CDay + " 天 , " + CHour + " 小時 , " + CMinute + " 分鍾 , " + CSecond + " 秒 "
document.clock.DownCount.value = DayALL
var counter = setTimeout("DownCount()", 1000)
}

</script>

<!-- 案例代碼1結束 -->

<!-- 案例代碼2開始 -->

<form name = "clock">
<!-- [Step2]: 這里可以更該頁面上顯示的提示信息 -->
距離 2008 年 1 月 1 日，您將還有 <br>
<!-- [Step3]: 這里可以改變時間的列長度 -->
<input type="TEXT" name= "DownCount" size= "35">
</form>

<!-- 案例代碼2結束 -->

</BODY>

</HTML>

㈨ Html倒計時圖片代碼

<scripttype="text/javascript">
functionsleep(s){
s=s||0;
s=parseInt(s)*1000;
letnow=+newDate();
lettimer=null;
returnnewPromise((resolve,reject)=>{
timer=setInterval(()=>{
if(now+s<+newDate()){
clearInterval(timer);
resolve(true);
}
},10)
})

}

window.onload=asyncfunction(){
for(vari=5;i>0;i--)
awaitsleep(1)
alert('顯示圖片')
}
</script>

㈩ html倒計時代碼

function countDown(time) {
var dates = new Date(time),
dates1 = (dates - new Date())/1000,
date = Math.floor(dates1/3600/24),
hour = Math.floor((dates1-date*24*3600)/3600),
minute = Math.floor((dates1-date*24*3600-hour*3600)/60),
second = Math.floor((dates1-date*24*3600-hour*3600-minute*60)),
con = document.getElementById('show');

con.innerHTML = '距離國慶節搶購時間還有：'+ date + '天' + hour + '時' + minute + '分' + second + '秒';
};
setInterval("countDown('2014/10/01')");

閱讀全文

與html5倒計時源碼相關的資訊

熱點內容
安卓怎麼轉移數據華為 發布：2025-01-15 21:03:02 瀏覽：140
軟體列印反饋單腳本錯誤 發布：2025-01-15 21:01:24 瀏覽：177
如何進cs里的練槍伺服器 發布：2025-01-15 21:00:07 瀏覽：979
蘋果手機存儲晶元 發布：2025-01-15 20:52:02 瀏覽：162
盲人讀屏軟體安卓哪個好 發布：2025-01-15 20:47:13 瀏覽：728
炸圖腳本 發布：2025-01-15 19:56:07 瀏覽：429
八字源碼 發布：2025-01-15 19:54:47 瀏覽：372
伺服器可以變電腦使用嗎 發布：2025-01-15 19:40:29 瀏覽：202
傳奇手游免費腳本 發布：2025-01-15 19:30:21 瀏覽：300
我國當前資源配置存在哪些問題 發布：2025-01-15 19:25:03 瀏覽：514
© Design www.ultimate-communications.com 2015-2022
本站內容源自於網路，如遇問題可聯系相關處理。