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

Question

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

我需要更改下面的代码，以便我可以在每个名为“到期”的帖子上使用 自定义字段 作为日期，而不是下面的硬连线日期 (newDate("Jan 2021 年 5 月 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”

示例链接 (https://prnt.sc/pqg79l)

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>

我已经尝试过这段代码..它完全可以正常工作..我希望我对你有所帮助