很多站长朋友们都不太清楚怎么在html倒计时读秒,今天小编就来给大家整理怎么在html倒计时读秒,希望对各位有所帮助,具体内容如下:
本文目录一览: 1、 html页面的倒计时代码。。。。急求!!!! 2、 html页面中设置倒计时 3、 求个html倒计时代码 4、 html自动倒计时 5、 倒计时html代码 html页面的倒计时代码。。。。急求!!!!<body>
<div id="timer"></div>
<script type="text/javascript" language="javascript">
var endDate=new Date(2010,11,11,17,05,40);//年月日时分秒,月要减去1
(function daoJiShi()
{
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('daoJiShi()',1000);
}());
</script>
</body>
html页面中设置倒计时<TBODY>
<TR>
<TD vAlign=top width=200>
<TBODY>
<TR>
<TD>
<TABLE width=234 height="60"
border=0 align=center cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD colSpan=2 height=24><div align="center" class="STYLE3">距08年8月8日 奥运会开幕还有</div></TD></TR>
<TR>
<TD width="87" align=middle class=fb id=timeDate><div align="center" class="STYLE3">660天</div></TD>
<TD width="147"
align=middle class=fb id=times><div align="center" class="STYLE3">18:09:53</div></TD>
</TR></TBODY></TABLE>
<SCRIPT>
var now = new Date();
function createtime(){
var grt= new Date("8/08/2008 2");
now.setTime(now.getTime()+250);
days = (grt - now) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (grt - now) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (grt - now) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (grt - now) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = dnum+"天";
document.getElementById("times").innerHTML = hnum + ":" + mnum + ":" + snum;
}
setInterval("createtime()",250);
</SCRIPT>
</TD></TR></TBODY></TABLE>
求个html倒计时代码<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
还剩:
<label for="" id="hour">00</label>小时
<label for="" id="minute">00</label>分
<label for="" id="second">00</label>秒
</div>
<script type="text/javascript">
var o_b=document.getElementById("box");
//获取界面标签对象
var o_h=document.getElementById("hour");
var o_m=document.getElementById("minute");
var o_s=document.getElementById("second");
function showTime(){
var nowDate=new Date();
//把结束时间转化为日期对象
console.log(nowDate)
var nowTime=nowDate.getTime();
var endDate=new Date("2019/01/20 0");
var endTime=endDate.getTime();
//距离结束时间剩余的秒数
var diffTime=parseInt((endTime-nowTime)/1000);
console.log(diffTime)
if(diffTime<=0){
o_b.innerHTML="秒杀结束";
clearInterval(t);//清除定时器
}
//将剩余时间(秒)转换为时、分、秒
var hour=parseInt(diffTime/60/60);
var minute=parseInt(diffTime/60%60);
var second=diffTime%60;
if(hour<10){
hour="0"+hour;
}
if(minute<10){
minute="0"+minute;
}
if(second<10){
second="0"+second;
}
console.log(o_h);
console.log(o_m);
console.log(o_s);
o_h.innerHTML=hour;
o_m.innerHTML=minute;
o_s.innerHTML=second;
// setTimeout(showTime,1000);
}
showTime();
var t=setInterval(showTime,1000);
console.log(t);
</script>
</body>
</html>
html自动倒计时你好!本身html标签语言是不能实现自动倒计时功能的,要配合JS来做特效才能真正达到这样的效果,我不知你要做哪种类型的倒计时特效,那我把一般页面跳转的JS特效发到这里,你看是否能够帮到你!
<html>
<head><title></title>
<script language='javascript' type='text/javascript'>
var secs =5; //倒计时的秒数
var URL ;
function Load(url){
URL =url;
for(var i=secs;i>=0;i--)
{
window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000);
}
}
function doUpdate(num)
{
document.getElementById('ShowDiv').innerHTML = '将在'+num+'秒后自动跳转到' ;
if(num == 0) { window.location=URL; }
}
</script>
</head>
<body>
<div id="ShowDiv"></div>
<script language="javascript">
Load("输入你要跳转的网址或文件"); //要跳转到的页面
</script>
</body>
</html>
希望我的回答能令你满意!
倒计时html代码倒计时的html代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="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, 100 100, 0, 100 100, 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, 100 100, 0, 100 100, 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:0px 0px 8px #333; background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000)); }
.time { width:160px; height:160px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; box-shadow:0px 0px 8px #333 inset; text-align:center; line-height:160px; font-family:"Book Antiqua", Palatino, serif; font-size:35px; font-weight:bold; text-shadow: 1px 1px 3px #333; }
.time em { background:#fff; position:absolute; top:62px; left:12px; height:18px; width:140px; opacity:0.4; }
</style>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"> </div>
<div class="time"><span></span><em></em></div>
<script src=""></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;
function showTime(){
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};
};
};
$(".time span").html(MM + ":" + SS + ":" + MS);
};
s = setInterval("showTime()",100);
function start1(){
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)");
};
function start2(){
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>
<input onclick="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倒计时读秒的介绍到此就结束了,不知道本篇文章是否对您有帮助呢?如果你还想了解更多此类信息,记得收藏关注本站,我们会不定期更新哦。
查看更多关于怎么在html倒计时读秒的简单介绍的详细内容...