如何制作一个基本的倒计时器
我正在尝试为电子中的一个非常基本的应用程序进行倒计时。我在下面列出的 .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>
慕标琳琳浏览 103回答 2
2回答
-
POPMUISE
您需要更新 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
最近，我创建了一个代码来显示给定分钟的倒计时，并通过提供的函数设置该值。你可以试试这个代码；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);}编辑：当您提供代码时，您可以尝试以下操作；渲染器.jsconst 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>
随时随地看视频慕课网APP
相关分类
Html5