建站经验技巧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.sz-kmd.com.cn/website/134.html

DIV+CSS基础DIV+CSS技巧CSS3基础建站经验技巧实用资源下载