APEX 日期之间的倒计时器

Question

我正在尝试使用下面的代码显示结束日期/时间列和系统日期/时间列之间的倒计时器。它不显示计时器。

我创建了一个页面项 P3_TIMER，它有一个列 P3_STARTDATE。

var timer;

var endDate = new Date();
endDate.setDate(endDate.getDate()); //End date is the sys date

timer = setInterval(function() {
  timeBetweenDates(endDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = :P3_STARTDATE;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
$s('P3_TIMER',timer);
}

Answer 1

无法混合 pl/sql 和 javascript。它们是不同的语言并在不同的环境中运行。

function timeBetweenDates(toDate) {
  var dateEntered = :P3_STARTDATE; >>> This is pl/sql 
  var now = new Date();

P3_STARTDATE 需要转换为 JavaScript 日期对象。这不能直接进行，需要进行一些解析，如下所示

对于下面的示例，假设日期以 DD-MON-YYYY 格式传递。

var timer;

var endDate = new Date();
endDate.setDate(endDate.getDate()); //End date is the sys date

timer = setInterval(function() {
  timeBetweenDates(endDate);
}, 1000);

function parseDate(s) {
  var months = {jan:0,feb:1,mar:2,apr:3,may:4,jun:5,
                jul:6,aug:7,sep:8,oct:9,nov:10,dec:11};
  var p = s.split('-');
  return new Date(p[2], months[p[1].toLowerCase()], p[0]);
}

function timeBetweenDates(toDate) {
  var dateEntered = parseDate(apex.item( "P63_DATE" ).getValue() );
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
apex.item("P63_TIMER").setValue(`Days: ${days}, Hours: ${hours}, Minutes: ${minutes}, Seconds: ${seconds}`);
}