前言
Java Applet 是 JDK 1.0 (1996) 引入的瀏覽器內嵌 Java 程式技術，曾廣泛用於網頁互動、圖表、遊戲。然而自 2015 年瀏覽器廠商宣布淘汰 NPAPI 外掛架構，Applet 已徹底退出歷史舞台 (JDK 9 標記棄用，JDK 11 移除)。本文以教學角度回顧 Applet 計時器實作，並提供現代 Web 前端替代方案。
Applet 版本實作 (僅供歷史參考)
import java.applet.Applet;
import java.awt.*;
import java.util.Calendar;
public class ClockApplet extends Applet implements Runnable {
private Thread clockThread;
private String timeStr = "";
private int fontSize = 24;
private Color fontColor = Color.BLUE;
@Override
public void init() {
// 從 HTML 讀取參數
String sizeParam = getParameter("fontSize");
String colorParam = getParameter("fontColor");
if (sizeParam != null) fontSize = Integer.parseInt(sizeParam);
if (colorParam != null) fontColor = Color.decode("0x" + colorParam);
setBackground(Color.WHITE);
}
@Override
public void start() {
if (clockThread == null) {
clockThread = new Thread(this);
clockThread.start();
}
}
@Override
public void stop() {
clockThread = null; // 讓 run() 迴圈自然結束
}
@Override
public void run() {
while (clockThread == Thread.currentThread()) {
Calendar now = Calendar.getInstance();
timeStr = String.format("%02d:%02d:%02d",
now.get(Calendar.HOUR_OF_DAY),
now.get(Calendar.MINUTE),
now.get(Calendar.SECOND));
repaint(); // 觸發 paint()
try { Thread.sleep(1000); } catch (InterruptedException ignored) {}
}
}
@Override
public void paint(Graphics g) {
g.setColor(fontColor);
g.setFont(new Font("SansSerif", Font.BOLD, fontSize));
g.drawString(timeStr, 20, 40);
}
}
對應 HTML 頁面
<!DOCTYPE html>
<html>
<head>
<title>Applet 時鐘 (已淘汰技術)</title>
</head>
<body>
<applet code="ClockApplet.class" width="200" height="80">
<param name="fontSize" value="30">
<param name="fontColor" value="0000FF">
您的瀏覽器不支援 Java Applet。
</applet>
</body>
</html>
為什麼 Applet 被淘汰？
| 原因 | 說明 |
|---|
| 安全性 | 沙箱逃逸漏洞頻傳，需使用者手動允許執行簽名 Applet |
| 架構變革 | 瀏覽器移除 NPAPI (Netscape Plugin API) 支援，Chrome 45+, Firefox 52+, Edge 全面禁用 |
| 行動裝置 | iOS/Android 瀏覽器從未支援 Applet |
| 部署複雜 | 需 JRE 安裝、版本相容、簽名憑證、安全性提示 |
| 替代技術成熟 | JavaScript/HTML5/CSS3/WebAssembly 完全取代所有用途 |
現代替代方案：原生 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>現代 Web 時鐘</title>
<style>
#clock {
font-family: 'Consolas', 'Monospace';
font-size: 2rem;
color: #2196F3;
text-shadow: 0 0 10px rgba(33,150,243,0.5);
padding: 1rem;
border: 2px solid #E3F2FD;
border-radius: 8px;
display: inline-block;
background: #FAFAFA;
}
</style>
</head>
<body>
<div id="clock">載入中...</div>
<script>
function updateClock() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-TW', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('clock').textContent = timeStr;
}
updateClock(); // 立即顯示
setInterval(updateClock, 1000); // 每秒更新
</script>
</body>
</html>
進階現代方案比較
| 方案 | 適用場景 | 優點 | 缺點 |
|---|
Vanilla JS setInterval | 簡單時鐘、倒數計時 | 零依賴、極輕量、瀏覽器原生 | 複雜邏輯需自行管理 |
| Vue/React 組件 | SPA 應用整合 | 響應式、組件化、易測試 | 需框架環境 |
| Web Worker | 高精度、不阻塞主執行緒 | 獨立執行緒、精度穩定 | API 較複雜 |
| Server-Sent Events (SSE) | 伺服器時間同步、多客戶端同步 | 單向即時、自動重連 | 需後端支援 |
| WebSocket | 雙向即時、協作應用 | 全雙工、低延遲 | 複雜度高 |
Java 後端提供時間 API (供前端呼叫)
@RestController
@RequestMapping("/api/time")
public class TimeController {
@GetMapping("/now")
public Map now() {
Instant now = Instant.now();
return Map.of(
"epochMilli", now.toEpochMilli(),
"iso8601", now.toString(),
"formatted", DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")
.withZone(ZoneId.of("Asia/Taipei"))
.format(now),
"timezone", "Asia/Taipei"
);
}
}
遷移建議清單
- 盤點現有 Applet：列出所有內部/外部系統使用的 Applet 功能
- 功能分類：時鐘/計時器 → JS；圖表 → Chart.js/ECharts；表單驗證 → HTML5/JS；遊戲 → Canvas/WebGL
- 重寫優先級：對外服務優先、核心業務次之、內部工具最後
- 技術選型：團隊熟悉度優先 (Vue/React/Vanilla JS)
- 測試驗證：跨瀏覽器 (Chrome/Firefox/Safari/Edge)、行動裝置、無障礙
結語
Java Applet 完成了它的歷史使命，現代 Web 技術棧提供了更安全、更高效、跨平台的替代方案。作為 Java 開發者，掌握前端基礎 (HTML/CSS/JS)與RESTful API 設計，才是構建現代全端應用的正確路徑。
- 上一篇文章： Java Web Session 登入驗證完整實作：從登入攔截到登出清理的安全最佳實務
- 下一篇文章： Spring Bean 管理核心完整指南：依賴注入六大模式、集合注入、自動裝配與生命週期
Copyright ©
程式碼之家 All Rights Reserved
