[英]How to call Javascript from inside a PLSQL code in dynamic action of oracle apex
[英]How to call javascript Function in Oracle APEX on button click in dynamic action?
我有秒表的 javascript 我想用 oracle 顶点按钮开始停止。 我创建按钮并使用 Execute 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 代码。 这个标题我添加到 static 内容中。 我认为这个功能需要调用 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>
这是一个使用动态操作的示例,尽管大部分逻辑将在通过页面属性加载的 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 object 上:
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;
接下来,创建两个按钮,一个名为 START,另一个名为 RESET。 对于开始按钮,请务必将 static ID 设置为 START。
然后为点击事件开始按钮创建一个动态动作。 将动作设置为执行 JavaScript 代码并将代码设置为startStop();
最后,为点击事件RESET按钮添加一个Dynamic Action。 将执行 JavaScript 代码的动作设置为reset();
只是一些注意事项:
我不完全确定,因为您的问题描述不是 100% 清楚,但是动态操作如何连接到您的按钮?
您使用 HTML 代码创建按钮,但这意味着该按钮在运行前不存在,并且您无法在页面设计器中为其分配动态操作?
您的 javascript 代码何时触发? 因为我认为这就是你的代码没有被执行的问题。
回答:
如果你想生成这样的按钮,你需要为整个页面初始化你的函数。
在页面设计器中单击左侧的页面,然后单击 go 至:右侧的"JavaScript" > "Function and Global Variable Declaration"
,您必须在此处声明您的函数。
现在,您在 header 中创建的按钮可以使用startStop()
function 并将执行您的代码。
我没有检查你的代码,所以我不知道它是否会按预期工作,但这样你至少可以执行它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.