我正在嘗試使用 expressjs 構建番茄計時器。我已經用 EJS 制作了頁面，并為每個頁面提供了名稱屬性，以便在服務器中利用它們。但是，如果我應該將每個按鈕包裝在一個表單中，并在我的 app.js 檔案中為它們的每個功能創建單獨的發布路由以“捕獲”點擊，我會感到非常困惑？
我認為僅使用純 JavaScript 會更容易做到這一點，但我正在嘗試將其作為一個完整的堆疊型別的應用程式，以表明我熟悉 node 和 express。
我將分享呈現的頁面和它的 EJS 代碼。App.js 現在幾乎是空的，除了一些樣板/常規路由到其他頁面。我想我對如何在 javascript 中實作計時器有一個好主意，我只是不確定如何在 node/express 中實作它。我希望我的問題很清楚，我剛剛開始使用 Stackoverflow，所以請多多包涵 :) Pomodoro timer page
<!-- Timers -->
<div class="row p-1">
<p class="col-lg-4 pomodoro-timer" name="w_minutes">25<span class="colon">:</span><span name="w_seconds"></span>00</p>
<p class="col-lg-4 pomodoro-timer pomodoro-cycles" name="cycles">0</p>
<p class="col-lg-4 pomodoro-timer" name="b_minutes">5<span class="colon">:</span><span name="b_seconds"></span>00</p>
</div>
<!-- Timer buttons -->
<div class="row mt-2">
<div class="col-lg-4 pomodoro-button">
<button class="btn btn-lg btn-light" type="button" name="startButton">Start</button>
</div>
<div class="col-lg-4 pomodoro-button">
<button class="btn btn-lg btn-danger" type="button" name="resetButton">Reset</button>
</div>
<div class="col-lg-4 pomodoro-button">
<button class="btn btn-lg btn-warning" type="button" name="pauseButton">Pause</button>
</div>
</div>
uj5u.com熱心網友回復：
來回呼叫后端 API 會引入時間延遲，這可能不是高精度計時器的理想解決方案。我的建議是創建一個包含計時器邏輯的公共 JS 檔案，將其與其他公共資產public一起放在檔案夾中。css
但是，如果您正在創建監控儀表板，每秒輪詢后端 API 的想法可能會奏效。資料點通常保存在帶有時間戳的資料庫中，比如說每秒。雖然往返操作可能會造成輕微的時間延遲，但我們仍然存在準確性的錯覺，因為我們在視覺上指的是資料點的時間戳，而不是實際的往返時間。
盡管如此，我還是會提供基于上述建議的實作示例，讓您大致了解如何使用 Node-Express-EJS 實作此解決方案。隨意根據您的要求進行修改。
app.js
const path = require("path");
const express = require("express");
const app = express();
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));
app.use(express.static(path.join(__dirname, "public")));
app.get("/", (req, res, next) => {
res.render("template", {
pageTitle: "pomodoro",
});
});
app.listen(3000);
/views/template.ejs
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/styles.css" />
<script src="/js/main.js"></script>
</head>
<body>
<main>
<div>
<p id="hour">00</p>
<p class="sep">:</p>
<p id="minute">00</p>
<p class="sep">:</p>
<p id="second">00</p>
</div>
</main>
<button onclick="startCounter()">Start</button>
<button onclick="pauseCounter()">Pause</button>
<button onclick="stopCounter()">Stop</button>
</body>
</html>
/public/js/main.js
let interval;
let isPaused = false;
function startCounter() {
const hourTag = document.getElementById("hour");
const minuteTag = document.getElementById("minute");
const secondTag = document.getElementById("second");
if (!isPaused) {
hourTag.innerText = "00";
minuteTag.innerText = "25";
secondTag.innerText = "00";
}
isPaused = false;
interval = setInterval(() => {
let hour = parseInt(hourTag.innerText);
let minute = parseInt(minuteTag.innerText);
let second = parseInt(secondTag.innerText);
if (hour === 0 && minute === 0 && second === 0) {
clearInterval(interval);
return;
}
second -= 1;
if (second < 0) {
second = 59;
minute -= 1;
}
if (minute < 0) {
minute = 59;
hour -= 1;
}
hourTag.innerText = hour.toString().padStart(2, "0");
minuteTag.innerText = minute.toString().padStart(2, "0");
secondTag.innerText = second.toString().padStart(2, "0");
}, 1000);
}
function pauseCounter() {
isPaused = true;
clearInterval(interval);
}
function stopCounter() {
clearInterval(interval);
document.getElementById("hour").innerText = "00";
document.getElementById("minute").innerText = "00";
document.getElementById("second").innerText = "00";
}
/public/css/styles.css
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: row;
}
p {
display: inline-block;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/503947.html
標籤：javascript 节点.js 表示 ejs
上一篇：MongooseFind()-如果查詢未定義，則回傳所有檔案
下一篇：命令列Nodemon