WordPress website building tutorial: add countdown function to the site

one thousand four hundred and twenty-one
article

February 16, 2019 00:15:21 WordPress comment three hundred and twenty-four Reading mode

WordPress website building tutorial: add countdown function to the site

When publishing the activity, the deadline of the activity of the preparer is very necessary. Today's tutorial "WordPress Tutorial: Adding Countdown Function to the Site" is to achieve this function.

1. Save the following code as countdownjs.js in the js/directory of the current theme:

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=' Activity countdown: ';
Document. getElementById ('day '). innerHTML=getDay+' day ';
Document. getElementById ('hour '). innerHTML=getHour+' when ';
Document. getElementById ('min '). innerHTML=getMinute+' minute ';
Document. getElementById ('sec '). innerHTML=getSecond+' seconds';
} else {
Document. getElementById ('countdown '). innerHTML='This activity has ended'
}
}

2. Add the following code to the last of the functions.php file of the current theme?> In front of:

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 'This activity has ended';
}
}
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. When publishing/updating an article, switch to the end of the article mode, and then add the following short code where you want to insert the countdown:

[countdown time= "2019-01-15 18:41:57" ]

The time in the quotation marks of time="2019-01-15 18:41:57" is the end time of the activity. Please keep the format consistent when changing to other dates and times.

Reprinted from: https://jiub.ren/3060.html

Comment