DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS教程:線小測試程序
JS教程:線小測試程序
編輯:關於JavaScript     

9.3  在線小測試程序

在本章中,我們將對“在線小測試”程序作兩處修改。一是允許用戶首先選擇回答完問題所需要的時間,二是允許用戶選擇要回答多少個問題。

要把“在線小測試”程序轉換為一個基於計時器的程序,只需修改兩個頁面,即QuizPage.htm頁面和GlobalFunctions.htm頁面。

首先,需要修改的是QuizPage.htm頁面中小測試程序的開始表單,在新的程序中,將允許用戶選擇要回答多少個問題以及答題的時間限制。接下來,還要修改cmdStartQuiz_onclick()函數,使得當在cmdStartQuiz_onclick()函數中調用resetQuiz()函數時,能夠傳入兩個參數,一個參數表示答題的時間限制,另一個參數表示用戶選擇回答問題的數量。其中,resetQuiz()函數是定義在GlobalFunctions.htm頁面中的。

現在,我們討論一下GlobalFunctions.htm頁面本身,在GlobalFunctions.htm頁面中,需要修改resetQuiz()函數,以便根據用戶選擇的時間限制啟動一個計時器。另外,還需要創建兩個新的函數,以便對計時進行顯示和處理:一個函數將在浏覽器窗口的狀態欄中顯示剩余的時間以便提示用戶,另一個函數將處理當計時器到點時的情況。

首先,我們來修改QuizPage.htm頁面,將QuizPage.htm頁面在文本編輯器中打開。

在QuizPage.htm頁面中,frmQuiz表單目前僅包含一個按鈕,將該表單修改為如下所示的代碼:

<form name="frmQuiz">

<p>

Number of Questions <br>

<select name="cboNoQuestions" size="1">

<option value="3">3

<option value="5">5

</select>

</p>

<p>

Time Limit <br>

<select name="cboTimeLimit" size="1">

<option value="-1">No Time Limit

<option value="60">1 Minute

<option value="180">3 Minutes

<option value="300">5 Minutes

</select>

</p>

<input name=cmdStartQuiz type=button value="Start Quiz"

onclick="return cmdStartQuiz_onclick()">

</form>

在該表單中,添加了兩個新的<select>標記,以創建兩個下拉列表框。第一個下拉列表框允許用戶選擇願意回答多少個問題,第二個下拉列表框則允許用戶設置回答問題的時限。

接下來,修改頁面頂部的cmdStartQuiz_onclick()函數。

<script language=JavaScript>

function cmdStartQuiz_onclick()

{

var cboNoQuestions = document.frmQuiz.cboNoQuestions;

var noQuestions =

cboNoQuestions.options[cboNoQuestions.selectedIndex].value;

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved