继续分享wordpress建站教程。马上就要到圣诞节了,然后又是元旦节、春节,大家想不想给网站添加一个实时动态的倒计时效果呢?今天悦然wordpress建站就给大家分享两种方法。
方法一:使用代码
如果你对倒计时效果的需求比较简单,那么可以使用简单的HTML代码来实现,直接上代码,下面分别是农历新年、和圣诞节的倒计时代码,可以直接复制使用。
divclass="gn_box"hcenterfontcolor=#E/fontfontcolor=#D00E0/fontfontcolor=#BA/fontfontcolor=#AC/fontfontcolor=#8C年/fontfontcolor=#A-/fontfontcolor=#5E00A春/fontfontcolor=#B8节/fontfontcolor=#CF倒/fontfontcolor=#E6计/fontfontcolor=#FD时/font/center/hcenterdivspanX天/spanspanX时/spanspanX分/spanspanX秒/span/div/centerscripttype="text/javascript"functiongetRTime(){varEndTime=newDate(0/0/00:00:00);varNowTime=newDate();vart=EndTime.getTime()-NowTime.getTime();vard=Math.floor(t//60/60/4);varh=Math.floor(t//60/60%4);varm=Math.floor(t//60%60);vars=Math.floor(t/%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,);/script/div
divclass="gn_box"hcenterfontcolor=#A圣/fontfontcolor=#5E00A诞/fontfontcolor=#B8节/fontfontcolor=#CF倒/fontfontcolor=#E6计/fontfontcolor=#FD时/font/center/hcenterdivspanX天/spanspanX时/spanspanX分/spanspanX秒/span/div/centerscripttype="text/javascript"functiongetRTime(){varEndTime=newDate(0//:00:00);varNowTime=newDate();vart=EndTime.getTime()-NowTime.getTime();vard=Math.floor(t//60/60/4);varh=Math.floor(t//60/60%4);varm=Math.floor(t//60%60);vars=Math.floor(t/%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,);/script/div
代码的使用方法很简单,我们可以任何能够添加HTML代码的地方使用。在wordpress网站中,一般我们可直接在文章、页面、小工具中添加一个HTML模块,然后粘贴代码就可以了。
0年-春节倒计时
X天X时X分X秒
圣诞节倒计时
X天X时X分X秒
最终效果如上图所示。
方法二:使用插件
如果你觉得上面代码实现的倒计时效果太过简单,那就可以使用专门的倒计时插件,这样可以制作出效果更好的倒计时效果,这类效果常常应用到商城网站,比如做一些活动的倒计时等。接下来就分享几个类似的插件。
FlipTimer