当前位置:小鱼儿玄机二站 > 计算机网络 > js达成的奥林匹克运动倒计时石英钟效果代码,

js达成的奥林匹克运动倒计时石英钟效果代码,

文章作者:计算机网络 上传时间:2019-09-03

正文实例陈述了js达成的奥林匹克运动倒计时机械钟效果代码。分享给大家供大家参照他事他说加以考察,具体如下:

JS完结的倒计时效果实例(2则实例),

本文实例叙述了JS达成的倒计时效果。分享给大家供大家参照他事他说加以考察,具体如下:

笔者们平时会看到有个别网站在注册的时候欣赏搞个开关倒计时的效益,正是稍微秒将来注册这么些按键才得以点击,其目标就是迫令你去看她的挂号注意事项,那是三个很实用的机能;别的当大家开展在线考试的时候也必定会境遇答题倒计时的功效,这种倒计时效果是什么样促成的呢?上面大家就用Js来达成贰个倒计时效果,具体代码:

html页面:

<html> 
 <head> 
  <title>倒计时</title> 
  <!--以下为css样式--> 
  <style type= "text/css"> 
   .daojishi h2 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    margin-bottom:5px; 
    color:#151515; 
   } 
   .daojishi #timer 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    color:#151515; 
    font-weight:bold; 
   } 
  </style> 
  <script type = "text/javascript" src = "timer.js"> 
  </script> 
 </head> 
 <body onload = "timer()"> 
  <div class = "daojishi"> 
   <h2>剩余时间为:</h2> 
   <div id = "timer"> 
   </div> 
  </div> 
 </body> 
</html>

timer.js:

function timer() 
{
 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
 dd = checkTime(dd);
 hh = checkTime(hh);
 mm = checkTime(mm);
 ss = checkTime(ss);
 document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
 setInterval("timer()",1000);
}
function checkTime(i)
{
  if (i < 10) {
  i = "0" + i;
 }
  return i;
}

运维效果截图如下:

图片 1

再来看看另贰个JS倒计时功效:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
 00天
 00时
 00分
 00秒
</DIV>
<script type="text/javascript">
 function getRTime(){
  var EndTime= new Date('2016/05/1 10:00:00'); //截止时间
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  /*var d=Math.floor(t/1000/60/60/24);
  t-=d*(1000*60*60*24);
  var h=Math.floor(t/1000/60/60);
  t-=h*60*60*1000;
  var m=Math.floor(t/1000/60);
  t-=m*60*1000;
  var s=Math.floor(t/1000);*/
  var d=Math.floor(t/1000/60/60/24);
  var h=Math.floor(t/1000/60/60%24);
  var m=Math.floor(t/1000/60%60);
  var s=Math.floor(t/1000%60);
  document.getElementById("t_d").innerHTML = d + "天";
  document.getElementById("t_h").innerHTML = h + "时";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
 }
 setInterval(getRTime,1000);
 </script>
</body>
</html> 

运作效果截图如下:

图片 2

读者能够遵从本人的喜好选拔一款倒计时代码应用。

盼望本文所述对大家JavaScript程序设计具备扶助。

运转作效果果截图如下:

你只怕感兴趣的稿子:

  • js倒计时抢购实例
  • js代码完毕点击开关出现60秒倒计时
  • js完毕n秒倒计时后才得以点击的意义
  • js倒计时大约完结格局
  • js完结新年倒计时功效
  • js达成的奥林匹克运动倒计时石英钟效果代码
  • JS落成的仿天猫商城交易倒计时效果
  • javascript电商网址抢购倒计时效果完成
  • javascript倒计时效应落到实处
  • js完毕点击获取验证码倒计时效果

本文实例陈述了JS实现的倒计时效果。分享给大家供大家参照他事他说加以考察,具体如下: 我们常常会见到一些网址在...

图片 3

现实代码如下:

<html> 
<head> 
 <title>js倒计时</title> 
 <SCRIPT language=JavaScript1.2> 
function setcountdown(theyear,themonth,theday){ 
yr=theyear;mo=themonth;da=theday 
} 
setcountdown(2016,8,5) 
var occasion="2016巴西奥运会" 
var message_on_occasion="盼望已久的时刻终于来到了!" 
var countdownwidth='480px' 
var countdownheight='20px' 
var countdownbgcolor='tan' 
var opentags='<font face="宋体"><small>' 
var closetags='</small></font>' 
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") 
var crosscount='' 
function start_countdown(){ 
if (document.layers) 
document.countdownnsmain.visibility="show" 
else if (document.all||document.getElementById) 
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie 
countdown() 
} 
if (document.all||document.getElementById) 
document.write('') 
window.onload=start_countdown 
function countdown(){ 
var today=new Date() 
var todayy=today.getYear() 
if (todayy < 1000) 
todayy+=1900 
var todaym=today.getMonth() 
var todayd=today.getDate() 
var todayh=today.getHours() 
var todaymin=today.getMinutes() 
var todaysec=today.getSeconds() 
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec 
futurestring=montharray[mo-1]+" "+da+", "+yr 
dd=Date.parse(futurestring)-Date.parse(todaystring) 
dday=Math.floor(dd/(60*60*1000*24)*1) 
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) 
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) 
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) 
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+message_on_occasion+closetags 
return 
} 
else if (dday<=-1){ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+"时间已经过了!"+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+"Occasion already passed! "+closetags 
return 
} 
else{ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+"还有 "+dday+ " 天, "+dhour+" 小时, "+dmin+" 分, "+dsec+" 秒 就是 "+occasion+closetags 
} 
setTimeout("countdown()",1000) 
} 
</SCRIPT> 
<SCRIPT type="text/javascript" src=""></SCRIPT> 
<SCRIPT language="JavaScript"> 
<!--  
BaiduWriteAD("zouwenyedg","3"); 
//-->  
</SCRIPT> 
</head> 
<body> 
<ILAYER id=countdownnsmain visibility="hide" bgColor="&{countdownbgcolor};"  
height="&{countdownheight};" width="&{countdownwidth};"><LAYER  
id=countdownnssub height="&{countdownheight};"  
width="&{countdownwidth};" top="0" left="0"></LAYER></ILAYER> 
</body> 
</html>

盼望本文所述对咱们JavaScript程序设计具备辅助。

你可能感兴趣的小说:

  • js倒计时抢购实例
  • js代码完毕点击按键出现60秒倒计时
  • js达成n秒倒计时后才得以点击的功效
  • js倒计时大约达成方式
  • js完毕新年倒计时效率
  • JS完结的仿Tmall交易倒计时效果
  • javascript电商网址抢购倒计时效果落成
  • javascript倒计时作用落到实处
  • js完结点击获取验证码倒计时效果
  • JS达成的倒计时效果实例(2则实例)

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:js达成的奥林匹克运动倒计时石英钟效果代码,

关键词: