在本篇文章中，我將向您展示我如何使用JavaScript為JavaScript課程建立一個註冊計數器，以便我可以看到有多少人註冊了這個課程（註冊時間為11月15日至11月22日！）
這個計數器是一個完全多餘的東西，是我在拖延時做的，想要避免重要的工作。
我一直在思考不同的方法來實現這個功能，比如使用Scriptable創建一個JavaScript的iOS小工具。
但後來我想，嗯，那就只做一個網頁好了。一個我可以在iPad上保持打開的網頁，我將iPad放在桌子旁邊或其他可以不時看到它的地方。
我可以設置iPad永不進入睡眠狀態，並將網頁設置為每2分鐘自動刷新。
做一個簡單的網頁的好處是我可以在任何地方訪問它。無論是在iPad上、iPhone上還是Mac上。
我創建了一個Node.js程序來獲取我所需的數據。
第一步是編寫一個獲取數據的函數：
const getData = async () => {
return new Promise((resolve, reject) => {
let count = 0
//獲取計數
resolve(count)
})
}
我將其設置為async函數，因為我使用了fetch請求，而且很可能你也需要它。
如果你感興趣，我將所有的註冊信息存儲在Airtable紀錄中，所以在getData()內部，我放置了從Airtable獲取計數所需的所有代碼。
然後，我創建了一個非常簡單的Express服務器，該服務器提供了一個HTML頁面，該頁面在頁面的中央顯示了計數。
const express = require('express')
const app = express()
app.get('/', async (req, res, next) => {
const count = await getData()
const html = `
<html>
<head>
<!-- 每2分鐘自動刷新 -->
<meta http-equiv="refresh" content="120">
<!-- 在iOS上允許全屏顯示 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="https://fonts.googleapis.com/css2?family=Arvo:[[email protected]](/cdn-cgi/l/email-protection);500;600;700&display=swap" rel="stylesheet" media="all">
<style>
html,
body {
font-family: Arvo,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif;
margin: 0;
font-size: 200px
}
h1 {
display: grid;
place-items: center;
height: 100vh;
}
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%);
background-color: #000;
}
}
</style>
</head>
<body>
<h1>${count}</h1>
</body>
</html>
`
res.end(html)
})
const listener = app.listen(3000)
這是結果：
這是iPhone上同一個頁面的樣子：
您可以在本地計算機上運行程序，並可以從同一個Wi-Fi網絡上的設備訪問它，只要計算機在運行，或者如果您更喜歡，您也可以使用本地主機隧道服務，但您也可以將其放在互聯網上。
我將該應用程序放在我用於我的Node腳本的服務器上，這樣我就可以從任何地方訪問它，即使我是在4G網絡上。
如果我想的話，我也可以通過AirPlay將其投放到Apple TV上，這樣我就可以在大電視屏幕上看到註冊數量了。