基于javascript实现的活动倒计时功能,可以实现动态倒计时效果,结合wordpress的短代码功能,还能实现一篇文章多个不同的活动倒计时,对于经常发布限时活动的wordpress站点会非常有用,让访客实时知道活动的剩余时间。
1、把下面的代码保存为countdownjs.js,保存在主题的js/目录里:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
function getAdd(time){ if(time<10){ return "0"+time; }else{ return time; } } var interval = 1000; function ShowCountDown(year,month,day,hourd,minuted){ var now = new Date(); var endDate = new Date(year, month-1, day, hourd, minuted); var leftTime = endDate.getTime() - now.getTime(); var leftsecond = parseInt(leftTime/1000); var day = Math.floor(leftsecond/(60*60*24)); day = day < 0 ? 0 : day; var hour = Math.floor((leftsecond-day*24*60*60)/3600); hour = hour < 0 ? 0 : hour; var minute = Math.floor((leftsecond-day*24*60*60-hour*3600)/60); minute = minute < 0 ? 0 : minute; var second = Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60); second = second < 0 ? 0 : second; var getDay = getAdd(day); var getHour = getAdd(hour); var getMinute = getAdd(minute); var getSecond = getAdd(second); if(endDate > now){ document.getElementById('time').innerHTML = '活动倒计时:'; document.getElementById('day').innerHTML = getDay +'天'; document.getElementById('hour').innerHTML = getHour +'时'; document.getElementById('min').innerHTML = getMinute +'分'; document.getElementById('sec').innerHTML = getSecond +'秒'; }else{ document.getElementById('countdown').innerHTML= '本次活动已经结束' } } |
2、把下面的代码添加到主题的functions.php文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function countdown($atts, $content=null) { extract(shortcode_atts(array("time" => ''), $atts)); date_default_timezone_set('PRC'); $endtime=strtotime($time); $nowtime=time(); global $endtimes; $endtimes = str_replace(array("-"," ",":"),",",$time); if($endtime>$nowtime){ return ' <div id="countdown"> <span id="time"></span> <span id="day"></span> <span id="hour"></span> <span id="min"></span> <span id="sec"></span> </div> '; }else{ return '本次活动已经结束'; } } function countdown_js() { global $endtimes; echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."/n"; } add_shortcode('countdown', 'countdown'); add_action('wp_footer', 'countdown_js'); wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false ); wp_enqueue_script( 'countdown_js' ); |
3、在文章编辑窗口中添加短代码:
1 |
[countdown time="2016-07-09 18:41:57"] |
其中 time=”2016-07-09 18:41:57″ 引号中的是结束时间,格式保持一致
扩展:
如果不需要短代码功能,可以把第2步的代码修改如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function countdown($time) { date_default_timezone_set('PRC'); $endtime=strtotime($time); $nowtime=time(); global $endtimes; $endtimes = str_replace(array("-"," ",":"),",",$time); if($endtime>$nowtime){ return ' <div id="countdown"> <span id="time"></span> <span id="day"></span> <span id="hour"></span> <span id="min"></span> <span id="sec"></span> </div> '; }else{ return '本次活动已经结束'; } } function countdown_js() { global $endtimes; echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."/n"; } add_action('wp_footer', 'countdown_js'); wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false ); wp_enqueue_script( 'countdown_js' ); |
然后在主题文件中添加调用代码:
1 |
<?php countdown('2016-07-09 17:29:00');?> |
引号中的是结束时间格式,格式保持一致
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/248209.html