我正在嘗試為電子中的一個非?；镜膽贸绦蜻M行倒計時。我在下面列出的 .html 文件中創建了一個按鈕。我還創建了一個名為 startTimer 的空函數。我如何制作一個按下按鈕后就會開始的計時器？我認為這需要在我的 render.js 文件中完成？提前致謝！<button onclick="startTimer()">Start Timer</button>main.js：const { app, BrowserWindow } = require('electron')function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') win.webContents.openDevTools()}app.whenReady().then(createWindow)app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() }})app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() }})索引.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <button onclick="startTimer()">Start Timer</button> <script src="./render.js"></script> </body></html>
2 回答
POPMUISE
TA貢獻1765條經驗 獲得超5個贊
您需要更新 render.js，并在 HTML 中添加字段來保存計時器值：
// In the render.js file.
function startTimer(){
// Retrieve the values of your inputs
var seconds = document.getElementById("seconds").value || 0;
var minutes = document.getElementById("minutes").value || 0;
var hours = document.getElementById("hours").value || 0;
// Calculate the total amount of milliseconds (1000 times the number of seconds).
var totalMilliseconds = 1000*(Number(seconds) + Number(minutes)*60 + Number(hours)*60*60)
// Start the timer with javascript builtin.
setTimeout(doSomething, totalMilliseconds)
}
function doSomething() {
// Do something
alert("Time is over!");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<label>Seconds: </label>
<input type="number" id="seconds" name="seconds" placeHolder="insert seconds"><br>
<label>Minutes: </label>
<input type="number" id="minutes" name="minutes" placeHolder="insert minutes"><br>
<label>Hours: </label>
<input type="number" id="hours" name="hours" placeHolder="insert hours"><br>
<button onclick="startTimer()">Start Timer</button>
<script src="./render.js"></script>
</body>
</html>
MMTTMM
TA貢獻1869條經驗 獲得超4個贊
最近，我創建了一個代碼來顯示給定分鐘的倒計時，并通過提供的函數設置該值。你可以試試這個代碼；
const countdown = (durationInMin, setter) => {
// added 1 second to start time, so this will start from 00 seconds
let startTime = Date.now() + 1000
let diff, min, sec
//updating timer by 1 second
let timer = setInterval(() => {
if (diff <= 0) {
//once the different reached zero, clearing the interval
clearInterval(timer)
return;
}
diff = durationInMin * 60 - (((Date.now() - startTime) / 1000) | 0)
min = (diff / 60) | 0
sec = (diff % 60) | 0
// formatting to two digits
min = min < 10 ? "0" + min : min
sec = sec < 10 ? "0" + sec : sec
// display format
let t = min + ":" + sec
// calling the setter function by passing the timer value
setter(t)
}, 1000)
}
您可以在此處指定durationInMin 的持續時間（以分鐘為單位）和setter 函數以顯示計時器的返回值。
您可以按如下方式調用使用它；
function setter(value) {
myGlobalVariable = value
}
startTimer() {
countdown(5,setter);
}
編輯：
當您提供代碼時，您可以嘗試以下操作；
渲染器.js
const countdown = (durationInMin, setter) => {
// added 1 second to start time, so this will start from 00 seconds
let startTime = Date.now() + 1000
let diff, min, sec
//updating timer by 1 second
let timer = setInterval(() => {
if (diff <= 0) {
//once the different reached zero, clearing the interval
clearInterval(timer)
return;
}
diff = durationInMin * 60 - (((Date.now() - startTime) / 1000) | 0)
min = (diff / 60) | 0
sec = (diff % 60) | 0
// formatting to two digits
min = min < 10 ? "0" + min : min
sec = sec < 10 ? "0" + sec : sec
// display format
let t = min + ":" + sec
// calling the setter function by passing the timer value
setter(t)
}, 1000)
};
function setter(value) {
var t = document.getElementsByClassName("timer")[0]
t.innerText = value.toString()
}
function startTimer() {
console.log("clicked")
countdown(0.5, setter)
}
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<button onclick="startTimer()">Start Timer</button>
<div class="timer">--:--</div>
<script src="./renderer.js"></script>
</body>
</html>
- 2 回答
- 0 關注
- 193 瀏覽
添加回答
舉報
0/150
提交
取消