建站经验技巧JS实现网页显示倒计时或正计时的简单方法

JS实现网页显示倒计时或正计时的简单方法

网页上显示倒计时常用于设置距某个活动开始(或结束)还有多少时间,而正计时常用于在网页上展示该网站运行的时间,下面分别分享用于倒计时和正计时的JS代码:

网页上显示倒计时

在需要显示倒计时的地方加入这段“容器”:

<span id="time"></span>

在网页尾部body标签之前加入下面的脚本代码:

<script>    
function show_date_time(){   
 window.setTimeout("show_date_time()", 1000);   
 target=new Date(2045,0,19,10,0,0);  //这里使用0-11分别表示1-12月
 today=new Date(); 
 timeold=(target.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);   
  if (daysold<0) {   
  document.getElementById("time").innerHTML="该活动已结束!";   
}   
 else{   
 if (daysold<10) {daysold="0"+daysold}   
 if (hrsold<10) {hrsold="0"+hrsold}   
 if (minsold<10) {minsold="0"+minsold}   
 if (seconds<10) {seconds="0"+seconds}   
 if (daysold>0) {   
  document.getElementById("time").innerHTML="距活动结束还有:
  "+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";   
 }   
 else   
  document.getElementById("time").innerHTML="<b>距活动结束还有:
  "+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</b>";
    //结束时间小于1天时加粗显示
}   
}   
show_date_time();   
</script>

在以上代码中的target=new Date(2045,0,19,10,0,0)部分设置倒计时目标时间,分别设置年月日时分秒,注意这里的月份使用0-11数字表示,0表示1月,11表示12月,代码中的中文部分可以修改为自己设置的倒计时相关文案……

JS倒计时.png

网页上显示正计时

在需要显示正计时的地方加入下面的“容器”:

<span id="showsectime"></span>

在网页尾部body标签前加入下面的脚本代码:

<script>
function NewDate(str) { 
 str = str.split('-'); 
 var date = new Date(); 
 date.setUTCFullYear(str[0], str[1] - 1, str[2]); 
 date.setUTCHours(0, 0, 0, 0); 
 return date; 
} 
function showsectime() {
 var birthDay =NewDate("2016-09-12");
 var today=new Date();
 var timeold=today.getTime()-birthDay.getTime();
 var sectimeold=timeold/1000
 var secondsold=Math.floor(sectimeold);
 var msPerDay=24*60*60*1000;
 var e_daysold=timeold/msPerDay;
 var daysold=Math.floor(e_daysold);
 var e_hrsold=(daysold-e_daysold)*-24;
 var hrsold=Math.floor(e_hrsold);
 var e_minsold=(hrsold-e_hrsold)*-60;
 var minsold=Math.floor((hrsold-e_hrsold)*-60);
 var seconds=Math.floor((minsold-e_minsold)*-60).toString();
 document.getElementById("showsectime").innerHTML = "本网站已安全运行"
 +daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
 setTimeout(showsectime, 1000);
}
showsectime();
</script>

在以上代码中的var birthDay中可设置计时起始时间,中文部分可设置为自己的文案……

JS正计时.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.liverdoctor.cn/website/134.html