Я пытаюсь получить форму, в которой пользователю задается количество времени, а затем отображается страница с таймером, отсчитывающим это количество времени. У меня проблема в том, что я могу получить переменную времени, заданную пользователем в homePage.ejs, в timerPage.ejs, используя EJS и рендеринг, но я не знаю, как получить переменную времени в timer.js, который timerPage. ejs использует для отображения таймера.
homePage.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/" method="POST">
<label>Set Timer To: </label>
<input name = "timerTime" type="text">
<button type ="submit">Start</button>
</form>
</body>
</html>
app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
app.get('/', function(req,res){
res.render('homePage');
});
app.post('/', function(req,res){
let time = req.body.timerTime;
res.render('timerPage', {timerTime: time});
});
app.listen(3000, function(){
console.log('server listening on port 3000!');
});
timerPage.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body >
<div id="countdown">00:00</div>
<div id="pause">Pause</div>
<div id="resume">Resume</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src= "timer.js"></script>
</html>
timer.js
var CountDown = (function ($) {
// Length ms
var TimeOut = 10000;
// Interval ms
var TimeGap = 1000;
var CurrentTime = (new Date()).getTime();
var EndTime = ( new Date() ).getTime() + TimeOut;
var GuiTimer = $('#countdown');
var GuiPause = $('#pause');
var GuiResume = $('#resume').hide();
var Running = true;
var UpdateTimer = function() {
// Run till timeout
if( CurrentTime + TimeGap < EndTime ) {
setTimeout( UpdateTimer, TimeGap );
}
// Countdown if running
if( Running ) {
CurrentTime += TimeGap;
if( CurrentTime >= EndTime ) {
GuiTimer.css('color','red');
}
}
// Update Gui
var Time = new Date();
Time.setTime( EndTime - CurrentTime );
var Minutes = Time.getMinutes();
var Seconds = Time.getSeconds();
GuiTimer.html(
(Minutes < 10 ? '0' : '') + Minutes
+ ':'
+ (Seconds < 10 ? '0' : '') + Seconds );
};
var Pause = function() {
Running = false;
GuiPause.hide();
GuiResume.show();
};
var Resume = function() {
Running = true;
GuiPause.show();
GuiResume.hide();
};
var Start = function( Timeout ) {
TimeOut = Timeout;
CurrentTime = ( new Date() ).getTime();
EndTime = ( new Date() ).getTime() + TimeOut;
UpdateTimer();
};
return {
Pause: Pause,
Resume: Resume,
Start: Start
};
})(jQuery);
jQuery('#pause').on('click',CountDown.Pause);
jQuery('#resume').on('click',CountDown.Resume);
// ms
CountDown.Start(120000);