我正在尝试为电子中的一个非常基本的应用程序进行倒计时。我在下面列出的 .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 关注
- 102 浏览
添加回答
举报
0/150
提交
取消