html网页倒计时代码(开发干货 | WordPress网站前端实现倒计时功能教程)

导读:相信很多站长都想实现倒计时功能,尤其是对于企业性质的网站。促销活动开展时,倒计时功能可以促进客户快速转化,所以开发倒计时功能尤为重要!


相信很多站长都想实现倒计时功能,尤其是企业网站。在开展促销活动时,倒计时功能可以促进客户快速转化,所以开发倒计时功能尤为重要!


1.将下面的代码另存为countdownjs.js,保存在当前使用的主题的js/目录下:


函数getAdd(time){ if(time & lt;10){ return & # 34;0"+时间; } else { 返回时间; } } var interval = 1000; 函数ShowCountDown(年、月、日、小时、分钟){ var now = new Date(); var endDate =新日期(年,月-1,日,小时,分钟); var left time = end date . gettime()-now . gettime(); var left second = parse int(left time/1000); var day = math . floor(left second/(606024)); day = day & lt;0 ?0:天; var hour = math . floor((left second-day 2460 * 60)/3600); hour = hour & lt;0 ?0:小时; var minute = math . floor((left second-day 246060-hour 3600)/60); minute = minute & lt;0 ?0:分钟; var second = math . floor(left second-day 246060-hour 3600-minute * 60); 秒=秒& lt0 ?0:秒; var getDay = getAdd(day); var getHour = getAdd(小时); var getMinute = getAdd(分钟); var getSecond = getAdd(秒); if(结束日期& gtnow){ document . getelementbyid(& # 39;时间& # 39;).innerHTML = & # 39活动倒计时:& # 39;; document . getelementbyid(& # 39;天& # 39;).innerHTML = getDay+& # 39;天& # 39;; document . getelementbyid(& # 39;小时& # 39;).innerHTML = get hour+& # 39;时间& # 39;; document . getelementbyid(& # 39;min & # 39).innerHTML = get minute+& # 39;积分& # 39;; document . getelementbyid(& # 39;sec & # 39).innerHTML = get second+& # 39;秒& # 39;; } else { document . getelementbyid(& # 39;倒计时& # 39;).innerHTML = & # 39此活动已经结束& # 39; } }

倒计时代码

2.将下面的代码添加到当前主题的最后一个functions.php文件中?& gt的前面:


函数倒计时($atts,$ content = null){ extract(short code _ atts(array(& # 34;时间& # 34;= & gt''),$ atts)); date _ default _ time zone _ set(& # 39;中国& # 39;); $ end time = strtotime($ time); $ now time = time(); global $ end times; $ end times = str _ replace(array(& # 34;-","",":"),",",$ time); if($ end time & gt;$ now time){ return & # 39; & lt;div id = & # 34倒计时& # 34;& gt & lt;span id = & # 34时间& # 34;& gt& lt/span>。 & lt;span id = & # 34天& # 34;& gt& lt/span>。 & lt;span id = & # 34小时& # 34;& gt& lt/span>。 & lt;span id = & # 34min & # 34& gt& lt/span>。 & lt;span id = & # 34sec & # 34& gt& lt/span>。 & lt;/div & gt; & # 39;; } else { return & # 39;此活动已经结束& # 39;; } } function count down _ js(){ global $ end times; echo & # 39;& lt脚本& gtwindow . setinterval(function(){ show count down(& # 39;。$endtimes。');},区间);& lt/script & gt;'。"n & # 34; } add _ short code(& # 39;倒计时& # 39;, '倒计时& # 39;); add _ action(& # 39;wp _ footer & # 39, '倒计时_ js & # 39); WP _ register _ script(& # 39;倒计时_ js & # 39,get_template_directory_uri()。'/js/count down js . js & # 39;,array(),& # 39;1.0',假); WP _ enqueue _ script(& # 39;倒计时_ js & # 39);

3.发布/更新文章时,切换到文章结尾模式,然后在要插入倒计时的位置添加以下短代码:


【倒计时时间= & # 34;2019-01-15 18:41:57"]

其中时间= & # 34;2019-01-15 18:41:57"引号中的时间是活动的结束时间。当更改为其他日期和时间时,请保持相同的格式。

您可以还会对下面的文章感兴趣

使用微信扫描二维码后

点击右上角发送给好友