精用JavaScript制作向导程序

　　良好的网页设计不只是您的网站设计美丽，而且在功能上也是给用户带来友好才行。其中能给用户带来最友好的工具就是网站向导。在这一部分中，我将使用JavaScript来制作一个向导程序且不参于服务器交互，直到我们完成。

　　在这里的演示程序大致分为四个功能模块：

　　1、信息提示。即该向导将要带领用户做什么？给用户一个提示。

　　2、分步骤让用户填写资料。

　　3、信息审核（这一步重要）。以提示用户确保所录入的信息正确。

　　4、提交完成。

　　代码如下：

以下为引用的内容：
<html>
<head>

    <title>JavaScript Subscription Wizard Example</title>
    <script type="text/javascript">
         function handleWizardNext()
        {
            if (document.getElementById('ButtonNext').name == 'Step2')
            {
                document.getElementById('ButtonNext').name = 'Step3';
                document.getElementById('ButtonPrevious').name = 'Step1';
                document.getElementById('ButtonPrevious').disabled = '';
                document.getElementById('Step1').style.display = 'none';
                document.getElementById('Step2').style.display = '';
                document.getElementById('HeaderTableStep2').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep1').style.backgroundColor = 'Silver';
            }

　　            else if (document.getElementById('ButtonNext').name == 'Step3')
            {
                document.getElementById('ButtonNext').name = 'Step4';
                document.getElementById('ButtonPrevious').name = 'Step2';
                document.getElementById('Step2').style.display = 'none';
                document.getElementById('Step3').style.display = '';
                document.getElementById('HeaderTableStep3').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep2').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonNext').name == 'Step4')
            {
                document.getElementById('ButtonNext').name = 'Step5';
                document.getElementById('ButtonPrevious').name = 'Step3';
                document.getElementById('Step3').style.display = 'none';
                document.getElementById('Step4').style.display = '';
                document.getElementById('HeaderTableStep4').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep3').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonNext').name == 'Step5')
            {
                document.getElementById('ButtonNext').name = '';
                document.getElementById('ButtonPrevious').name = 'Step4';
                document.getElementById('ButtonNext').disabled = 'disabled';
                document.getElementById('SubmitFinal').disabled = '';
                document.getElementById('Step4').style.display = 'none';
                document.getElementById('Step5').style.display = '';
                document.getElementById('HeaderTableStep5').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep4').style.backgroundColor = 'Silver';
                loadStep5Review();
            }
        }

　　 }

　　        function loadStep5Review()
        {
            document.getElementById('ReviewFirstName').innerHTML = document.getElementById('TextFirstName').value;
            document.getElementById('ReviewMiddleName').innerHTML = document.getElementById('TextMiddleName').value;
            document.getElementById('ReviewLastName').innerHTML = document.getElementById('TextLastName').value;
            document.getElementById('ReviewEmail').innerHTML = document.getElementById('TextEmail').value;
            if (document.getElementById('CheckboxHtmlGoodies').checked == 1)
            {
                document.getElementById('ReviewHtmlGoodies').innerHTML = 'Yes';
            }
            else
            {
                document.getElementById('ReviewHtmlGoodies').innerHTML = 'No';
            }

　　            if (document.getElementById('CheckboxJavaScript').checked == 1)
            {
                document.getElementById('ReviewJavaScript').innerHTML = 'Yes';
            }
            else
            {
                document.getElementById('ReviewJavaScript').innerHTML = 'No';
            }

　　            if (document.getElementById('CheckboxWdvl').checked == 1)
            {
                document.getElementById('ReviewWdvl').innerHTML = 'Yes';
            }
            else
            {
                document.getElementById('ReviewWdvl').innerHTML = 'No';
            }

　　
            var iCounter = 1;
            var iCharacterCount = document.getElementById('TextPassword').value.length;
            var passwordMasked = '';
            for (iCounter = 1; iCounter <= iCharacterCount; iCounter++)
            {
                passwordMasked = passwordMasked + '*';
            }
            document.getElementById('ReviewPassword').innerHTML = passwordMasked;
        }
    </script>
</head>

　　<body>
<form id="SubscriptionWizard" action="" method="post">
    <table border="1" cellpadding="5" cellspacing="0" id="HeaderTable">
        <tr>
            <td id="HeaderTableStep1" style="background-color:Yellow">
                Step 1: Getting Started</td>
            <td id="HeaderTableStep2" style="background-color:Silver">
                Step 2: Name</td>
            <td id="HeaderTableStep3" style="background-color:Silver">
                Step 3:  Account Access</td>
            <td id="HeaderTableStep4" style="background-color:Silver">
                Step 4: Select subscriptions</td>
            <td id="HeaderTableStep5" style="background-color:Silver">
                Step:5 Finalize & Submit</td>
        </tr>
    </table>
    <br />
<span id="Step1"><strong>
    Welcome to our Subscription Wizard!<br />
    </strong>
        <br />
    This wizard simulates subscribing for access to website content. Each step is highlighted in the header.
    <br />

　　 This step is intended to provide the user with everything they need to know to get started.

　　    <br />
</span>
<span id="Step2" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td align="right">
                First name:</td>
            <td>
                <input id="TextFirstName" name="FirstName" type="text" /></td>
        </tr>
        <tr>
            <td align="right">
                Middle name:</td>
            <td>
                <input id="TextMiddleName" name="MiddleName" type="text" /></td>
        </tr>
        <tr>
            <td align="right">
                Last name:</td>
            <td>
                <input id="TextLastName" name="LastName" type="text" /></td>
        </tr>
    </table>
</span>

　　<span id="Step3" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td align="right">
                Email:</td>
            <td>
                <input id="TextEmail" name="Email" type="text" /></td>
        </tr>
        <tr>
            <td align="right">
                Password:</td>
            <td>
                <input id="TextPassword" name="Password" type="password" /></td>
        </tr>
    </table>
</span>

　　<span id="Step4" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td align="left" colspan="2">
                <strong>
                Select your subscription:</strong></td>
        </tr>
        <tr>
            <td align="right">
                www.ahqibing.net:</td>
            <td>
                <input id="CheckboxHtmlGoodies" name="CheckboxHtmlGoodies" type="checkbox" value="Yes" /></td>
        </tr>
    </table>
</span>

　　<span id="Step5" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td colspan="2">
                <strong>Final Review:</strong></td>
        </tr>
        <tr>
            <td align="right">
                First name:</td>
            <td id="ReviewFirstName">
                </td>
        </tr>
        <tr>
            <td align="right">
                Middle name:</td>
            <td id="ReviewMiddleName">
                </td>
        </tr>
        <tr>
            <td align="right">
                Last name:</td>
            <td id="ReviewLastName">
                </td>
        </tr>
        <tr>
            <td align="right">
                Email:</td>
            <td id="ReviewEmail">
            </td>
        </tr>
        <tr>
            <td align="right">
                Password:</td>
            <td id="ReviewPassword">
            </td>
        </tr>
        <tr>
            <td align="left">
                <strong>
                Subscribed to:</strong></td>
            <td>
            </td>
        </tr>
        <tr>
            <td align="right">
                www.ahqibing.net:</td>
            <td id="ReviewHtmlGoodies">
            </td>
        </tr>
    </table>
</span>
<br />
<table border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td>
            <input id="ButtonPrevious" type="button" value="Previous" disabled="disabled" name=""

　　onclick="handleWizardPrevious()" /></td>
        <td>
            <input id="ButtonNext" type="button" value="Next" name="Step2" onclick="handleWizardNext()" /></td>
        <td>
            <input id="SubmitFinal" type="submit" value="Finish" disabled="disabled" /></td>
    </tr>
</table>
</form>
</body>
</html>

　　可以了，如果想让该程序制作的更完美些，可以试着添加其它功能，如验证等。

在线留言