Как сделать таймер обратного отсчета c - PullRequest
Новая
       1

Как сделать таймер обратного отсчета c

0 голосов
/ 13 апреля 2020

Я пытаюсь сделать обратный отсчет для действительно базового c приложения в электронном виде. Я создал кнопку в своем. html файле, который указан ниже. Я также создал пустую функцию с именем startTimer. Как мне go сделать таймер, который начнется после нажатия кнопки? Я предполагаю, что это должно быть сделано в моем файле рендера. 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>

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Вам нужно будет обновить ваш рендер. 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>
0 голосов
/ 13 апреля 2020

Недавно я создал код для отображения обратного отсчета в течение заданных минут и установки значения с помощью предоставленной функции. Вы можете попробовать этот код; 

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

Редактировать:

Поскольку вы предоставили код, вы можете попробовать следующее;

рендер. 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)
}

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>
      <div class="timer">--:--</div>

     <script src="./renderer.js"></script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...