javascript - 如何在动态操作中单击按钮时调用 Oracle APEX 中的 javascript 函数？

Question

我有秒表的 javascript，我想用 oracle apex 按钮开始停止。我创建按钮并使用执行 Javascript 表达式创建动态操作并粘贴 javasctipt 但它不运行。

var x;
var startstop = 0;

function startStop() { /* Toggle StartStop */

  startstop = startstop + 1;

  if (startstop === 1) {
    start();
    document.getElementById("start").innerHTML = "Stop";
  } else if (startstop === 2) {
    document.getElementById("start").innerHTML = "Start";
    startstop = 0;
    stop();
  }

}


function start() {
  x = setInterval(timer, 10);
} /* Start */

function stop() {
  clearInterval(x);
} /* Stop */

var milisec = 0;
var sec = 0; /* holds incrementing value */
var min = 0;
var hour = 0;

/* Contains and outputs returned value of  function checkTime */

var miliSecOut = 0;
var secOut = 0;
var minOut = 0;
var hourOut = 0;

/* Output variable End */


function timer() {
  /* Main Timer */


  miliSecOut = checkTime(milisec);
  secOut = checkTime(sec);
  minOut = checkTime(min);
  hourOut = checkTime(hour);

  milisec = ++milisec;

  if (milisec === 100) {
    milisec = 0;
    sec = ++sec;
  }

  if (sec == 60) {
    min = ++min;
    sec = 0;
  }

  if (min == 60) {
    min = 0;
    hour = ++hour;

  }


  document.getElementById("milisec").innerHTML = miliSecOut;
  document.getElementById("sec").innerHTML = secOut;
  document.getElementById("min").innerHTML = minOut;
  document.getElementById("hour").innerHTML = hourOut;

}


/* Adds 0 when value is <10 */


function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function reset() {


  /*Reset*/

  milisec = 0;
  sec = 0;
  min = 0
  hour = 0;

  document.getElementById("milisec").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("hour").innerHTML = "00";

}

这是 html 代码。我将这个标题添加到静态内容中。我认为这个功能需要调用oracle apex onclick="startStop()"的按钮

<h1>
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="milisec">00</span>
</h1>

<button onclick="startStop()" id="start">Start</button>
<button onclick="reset()">Reset</button>

Answer 1

这是一个使用动态操作的示例，尽管大部分逻辑将位于通过页面属性加载的 JavaScript 模块中。

给定这个 HTML(注意没有按钮):

<div style="line-height: 1.5; font-size: 3.2rem; font-weight: 500">
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="milisec">00</span>
</div>

将以下内容添加到页面的页面加载时执行属性。这将创建一个 JavaScript 模块(揭示模块模式)，该模块仅公开两个函数，稍后将其添加为 window 对象上的全局方法:

var timerModule = (function() {
  var startElmtId = 'START';
  var miliSecElmtId = 'milisec';
  var secElmtId = 'sec';
  var minElmtId = 'min';
  var hourElmtId = 'hour';

  var $startBtn = $('#' + startElmtId);
  var timerRef;

  var milisec = 0;
  var sec = 0;
  var min = 0;
  var hour = 0;

  var miliSecOut = 0;
  var miliSecElmt = document.getElementById(miliSecElmtId);
  var secOut = 0;
  var secElmt = document.getElementById(secElmtId);
  var minOut = 0;
  var minElmt = document.getElementById(minElmtId);
  var hourOut = 0;
  var hourElmt = document.getElementById(hourElmtId);

  function startStop() {
    if (timerRef === undefined) {
      $startBtn.children('span').text("Stop");
      start();
    } else {
      $startBtn.children('span').text("Start");
      stop();
    }
  }

  function start() {
    timerRef = setInterval(timer, 10);
  }

  function stop() {
    clearInterval(timerRef);
    timerRef = undefined;
  }

  function timer() {
    miliSecOut = checkTime(milisec);
    secOut = checkTime(sec);
    minOut = checkTime(min);
    hourOut = checkTime(hour);

    milisec = ++milisec;

    if (milisec === 100) {
      milisec = 0;
      sec = ++sec;
    }

    if (sec == 60) {
      min = ++min;
      sec = 0;
    }

    if (min == 60) {
      min = 0;
      hour = ++hour;
    }

    miliSecElmt.innerHTML = miliSecOut;
    secElmt.innerHTML = secOut;
    minElmt.innerHTML = minOut;
    hourElmt.innerHTML = hourOut;
  }

  /* Adds 0 when value is <10 */
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }

  function reset() {
    milisec = 0;
    sec = 0;
    min = 0
    hour = 0;

    miliSecElmt.innerHTML = "00";
    secElmt.innerHTML = "00";
    minElmt.innerHTML = "00";
    hourElmt.innerHTML = "00";
  }

  return {
    startStop: startStop,
    reset: reset
  };
})();

window.startStop = timerModule.startStop;
window.reset = timerModule.reset;

接下来，创建两个按钮，一个名为“开始”，另一个名为“重置”。对于开始按钮，请务必将静态 ID 设置为 START。

然后为点击事件“开始”按钮创建动态操作。将操作设置为“执行 JavaScript 代码”并将代码设置为 startStop();

最后，为单击事件 RESET 按钮添加动态操作。将执行 JavaScript 代码的操作设置为 reset();

几点说明:

1. HTML 不再具有按钮，该示例使用常规 APEX 按钮。更新的代码
2. 我缓存了 HTML 元素，因为它们被频繁引用。
3. 由于代码使用了显示模块模式，因此只需要全局公开两个函数。