使用Javascript在wordpress中自定义字段的计算

Question

我已经在自己的网站上实现了以下代码，以显示运行中的计时器。该站点在Wordpress上运行。现在，日期已输入代码中（因此它适用于整个站点）。我希望每个帖子都有一个运行计时器。

我需要更改下面的代码，以便可以在每个称为“过期”的帖子上使用自定义字段作为日期，而不是在（newDate（“ Jan 5，2021 15： 37:25）.getTime（）

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

以上代码来自here

我的网站是here

提前感谢

Answer 1

下面是您的要求：

1在自定义字段到期中将返回格式设置为自定义“ F j，Y g：i：s”

2）在functions.php中添加此功能

function functionname() {

    global $post;

    $field= get_field('expiry_date', $post->ID);
        echo '<input type="hidden" id="date" value="'.$field.'">';  
     }
    add_action( 'template_redirect', 'functionname' );

3）在您的js文件中，添加以下脚本

 var $= jQuery;

    var d = $("#date").val();
    console.log(d);
    // Set the date we're counting down to
    var countDownDate = new Date(d).getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result in the element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1000);

请确保您必须在要在帖子中显示的位置添加<p id="demo"></p>

我已经尝试过此代码了。它完全可以正常工作。希望我对此有所帮助