實施範例11

11.透過腳本程式來警告用戶時間即將屆滿

這個技巧目的是用來通知用戶有關操作的時限即將屆滿。

當一些功能無可避免需要設定時間限制時,腳本程式可以包括一個用來警告用戶有關時限即將屆滿的通知,並提供機制讓用戶可以要求更多時間。

例如程式會在操作時限20秒前彈出一個視窗,它會通知用戶有關時限,並讓用戶選擇是否需要延長。如用戶選擇"是"按鈕,時間將會被重置;如用戶選擇"否",甚至沒有回應時,時限會繼續至屆滿。

這個技巧涉及的時限是採用了window.setTimeout()方法。

範例:

在股票報價的頁面裡,腳本程式會在每5分鐘後刷新頁面以確保有最新的統計數字。而在時限屆滿前的20秒,系統會彈出一個視窗來詢問用戶是否在頁面更新前需要更多時間。用戶可以避免頁面因時限過了而被更新。

範例代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Stock Market Quotes</title>
<script type="text/javascript">
<!--
function timeControl() {
// set timer for 4 min 40 sec, then ask user to confirm.
setTimeout('userCheck()', 280000);
}
function userCheck() {
// set page refresh for 20 sec
var id=setTimeout('pageReload()', 20000);
// If user selects "OK" the timer is reset
// else the page will refresh from the server.
if (confirm("This page is set to refresh in 20 seconds.
Would you like more time?"))
{
clearTimeout(id);
timeControl();
}
}
function pageReload() {
window.location.reload(true);
}
timeControl();
-->
</script>
</head>
<body>
<h1>Stock Market Quotes</h1>
...etc...
</body>
</html>