当前位置：首页 » 操作系统 » 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 19:56:07 浏览：427
八字源码 发布：2025-01-15 19:54:47 浏览：370
服务器可以变电脑使用吗 发布：2025-01-15 19:40:29 浏览：200
传奇手游免费脚本 发布：2025-01-15 19:30:21 浏览：300
我国当前资源配置存在哪些问题 发布：2025-01-15 19:25:03 浏览：514
存储在哪里呀 发布：2025-01-15 19:11:39 浏览：450
pythonuniquelist 发布：2025-01-15 19:10:41 浏览：477
怎么升安卓系统下载 发布：2025-01-15 19:04:27 浏览：894
mcrypt扩展php 发布：2025-01-15 19:01:12 浏览：436
html源码解析 发布：2025-01-15 19:01:10 浏览：223
© Design www.ultimate-communications.com 2015-2022
本站内容源自于网络，如遇问题可联系相关处理。