我正在尝试为真正的电子基础应用倒计时。我在下面列出的.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()
}
})
index.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>
最近，我创建了一个代码，以显示给定分钟的倒计时，并通过提供的功能设置该值。您可以尝试此代码;
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);
}
更多参考资料：我从下面的StackOverflow thread中引用了此代码
您将需要更新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>