猿问

如何制作一个基本的倒计时器

我正在尝试为电子中的一个非常基本的应用程序进行倒计时。我在下面列出的 .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(){&nbsp; // Retrieve the values of your inputs&nbsp; var seconds = document.getElementById("seconds").value || 0;&nbsp; var minutes = document.getElementById("minutes").value || 0;&nbsp; var hours = document.getElementById("hours").value || 0;&nbsp;&nbsp;&nbsp; // Calculate the total amount of milliseconds (1000 times the number of seconds).&nbsp; var totalMilliseconds = 1000*(Number(seconds) + Number(minutes)*60 + Number(hours)*60*60)&nbsp;&nbsp;&nbsp; // Start the timer with javascript builtin.&nbsp;&nbsp; setTimeout(doSomething, totalMilliseconds)}function doSomething() {&nbsp; // Do something&nbsp; alert("Time is over!");}<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; &nbsp;<label>Seconds: </label>&nbsp; &nbsp; &nbsp;<input type="number" id="seconds" name="seconds" placeHolder="insert seconds"><br>&nbsp; &nbsp; &nbsp;<label>Minutes: </label>&nbsp; &nbsp; &nbsp;<input type="number" id="minutes" name="minutes" placeHolder="insert minutes"><br>&nbsp; &nbsp; &nbsp;<label>Hours: </label>&nbsp; &nbsp; &nbsp;<input type="number" id="hours" name="hours" placeHolder="insert hours"><br>&nbsp; &nbsp; &nbsp;<button onclick="startTimer()">Start Timer</button>&nbsp; &nbsp; &nbsp;<script src="./render.js"></script>&nbsp; </body></html>
0

MMTTMM

最近，我创建了一个代码来显示给定分钟的倒计时，并通过提供的函数设置该值。你可以试试这个代码；const countdown = (durationInMin, setter) => {&nbsp; &nbsp;// added 1 second to start time, so this will start from 00 seconds&nbsp; &nbsp; &nbsp;let startTime = Date.now() + 1000&nbsp; &nbsp; let diff, min, sec&nbsp; //updating timer by 1 second&nbsp; &nbsp; let timer = setInterval(() => {&nbsp; &nbsp; &nbsp; &nbsp; if (diff <= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//once the different reached zero, clearing the interval&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(timer)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; diff = durationInMin * 60 - (((Date.now() - startTime) / 1000) | 0)&nbsp; &nbsp; &nbsp; &nbsp; min = (diff / 60) | 0&nbsp; &nbsp; &nbsp; &nbsp; sec = (diff % 60) | 0// formatting to two digits&nbsp; &nbsp; &nbsp; &nbsp; min = min < 10 ? "0" + min : min&nbsp; &nbsp; &nbsp; &nbsp; sec = sec < 10 ? "0" + sec : sec// display format&nbsp; &nbsp; &nbsp; &nbsp; let t = min + ":" + sec// calling the setter function&nbsp; by passing the timer value&nbsp; &nbsp; &nbsp; &nbsp; setter(t)&nbsp; &nbsp; }, 1000)}您可以在此处指定durationInMin 的持续时间（以分钟为单位）和setter 函数以显示计时器的返回值。您可以按如下方式调用使用它；function setter(value) {&nbsp;myGlobalVariable = value}startTimer() {&nbsp;countdown(5,setter);}编辑：当您提供代码时，您可以尝试以下操作；渲染器.jsconst countdown = (durationInMin, setter) => {&nbsp; &nbsp; // added 1 second to start time, so this will start from 00 seconds&nbsp; &nbsp; let startTime = Date.now() + 1000&nbsp; &nbsp; let diff, min, sec&nbsp; &nbsp; //updating timer by 1 second&nbsp; &nbsp; let timer = setInterval(() => {&nbsp; &nbsp; &nbsp; &nbsp; if (diff <= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //once the different reached zero, clearing the interval&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(timer)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; diff = durationInMin * 60 - (((Date.now() - startTime) / 1000) | 0)&nbsp; &nbsp; &nbsp; &nbsp; min = (diff / 60) | 0&nbsp; &nbsp; &nbsp; &nbsp; sec = (diff % 60) | 0&nbsp; &nbsp; &nbsp; &nbsp; // formatting to two digits&nbsp; &nbsp; &nbsp; &nbsp; min = min < 10 ? "0" + min : min&nbsp; &nbsp; &nbsp; &nbsp; sec = sec < 10 ? "0" + sec : sec&nbsp; &nbsp; &nbsp; &nbsp; // display format&nbsp; &nbsp; &nbsp; &nbsp; let t = min + ":" + sec&nbsp; &nbsp; &nbsp; &nbsp; // calling the setter function&nbsp; by passing the timer value&nbsp; &nbsp; &nbsp; &nbsp; setter(t)&nbsp; &nbsp; }, 1000)};function setter(value) {&nbsp; &nbsp; var t = document.getElementsByClassName("timer")[0]&nbsp; &nbsp; t.innerText = value.toString()}function startTimer() {&nbsp; &nbsp; console.log("clicked")&nbsp; &nbsp; countdown(0.5, setter)}索引.html<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; &nbsp;<button onclick="startTimer()">Start Timer</button>&nbsp; &nbsp; &nbsp; <div class="timer">--:--</div>&nbsp; &nbsp; &nbsp;<script src="./renderer.js"></script>&nbsp; </body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答