一个基于HTML与JavaScript的Wizard演示

简介: 一个基于HTML与JavaScript的Wizard演示

整个过程模仿用户注册,分为三步完成,运行效果如下:

1348825061_3808.png

全部代码如下:

<html>
<head>
    <title>JavaScript Create User Wizard Example</title>
    <script type="text/javascript">
      function handleWizardNext()
        {
            if (document.getElementById('ButtonNext').name == 'step2')
            {
              document.getElementById('step1').style.display = 'none';
                document.getElementById('step2').style.display = '';
        document.getElementById('ButtonNext').name = 'step3';
 
                document.getElementById('ButtonPrevious').name = 'step1';
                document.getElementById('ButtonPrevious').disabled = '';
 
                document.getElementById('headstep1').style.backgroundColor = 'silver';
                document.getElementById('headstep2').style.backgroundColor = 'white';
            }
            else if(document.getElementById('ButtonNext').name == 'step3')
            {
              document.getElementById('step2').style.display = 'none';
                document.getElementById('step3').style.display = '';
 
        document.getElementById('ButtonNext').name = '';
        document.getElementById('ButtonNext').disabled = 'disabled';
 
        document.getElementById('ButtonPrevious').name = 'step2';
                document.getElementById('ButtonPrevious').disabled = '';
        document.getElementById('SubmitFinal').disabled = '';
 
        document.getElementById('headstep2').style.backgroundColor = 'silver';
                document.getElementById('headstep3').style.backgroundColor = 'white';
            }
 
        }
 
        function handleWizardPre() {
          // console.log("this is to go back previous page");
          if (document.getElementById('ButtonPrevious').name == 'step1') {
            // display/hide the relevative fieldset
            document.getElementById('step2').style.display = 'none';
                document.getElementById('step1').style.display = '';
 
                // enable/disable buttons
        document.getElementById('ButtonNext').name = 'step2';
        document.getElementById('ButtonPrevious').name = '';
                document.getElementById('ButtonPrevious').disabled = 'disabled';
                document.getElementById('SubmitFinal').disabled = 'disabled';
                document.getElementById('SubmitFinal').name = '';
 
                // change navigation color
                document.getElementById('headstep2').style.backgroundColor = 'silver';
                document.getElementById('headstep1').style.backgroundColor = 'white';
 
          } else if(document.getElementById('ButtonPrevious').name == 'step2') {
            // display/hide the relevative fieldset
            document.getElementById('step3').style.display = 'none';
                document.getElementById('step2').style.display = '';
 
                // enable/disable buttons
        document.getElementById('ButtonNext').name = 'step3';
        document.getElementById('ButtonNext').disabled = '';
 
        document.getElementById('ButtonPrevious').name = 'step1';
                document.getElementById('ButtonPrevious').disabled = '';
                
                document.getElementById('SubmitFinal').name = '';
                document.getElementById('SubmitFinal').disabled = 'disabled';
 
                // change navigation color
                document.getElementById('headstep3').style.backgroundColor = 'silver';
                document.getElementById('headstep2').style.backgroundColor = 'white';           
          }
        }
    </script>
    <style type="text/css">  
      #userregisterizard {
        width:500px;
        height: 350px;
        background-color:#EFEFEF;
        border-style:solid;
      border-width:5px;
      border-color:#001111;
      }
      #userregisterizard #wizardpanel{  
            padding: 5px;  
            height: 250;  
        }
        #userregisterizard #buttons{  
            padding: 5px;  
            height: 40;  
        }
        #navigationbar {
          padding: 2px; 
          height: 50px;
          background-color:silver;
        }  
    </style>
</head>
<body>
  <div id="userregisterizard">
    <div id="navigationbar">
      <label id="headstep1" style="background-color:white">Step 1: Register</label>  
      <label id="headstep2" style="background-color:silver">Step 2: Detail Profile</label>  
      <label id="headstep3" style="background-color:silver">Step 3: Finalize</label>
    </div>
    <div id="wizardpanel">
      <fieldset id="step1">
          <legend>Create User</legend>
        <label>Name<font color="red">*</font>: Enter your preferred user name</label><br>
        <input name="wsname" type="text"></br>
        <label>Password<font color="red">*</font>: Please use 8~16 characters that will protect your user account</label><br>
        <input name="uspassword" type="password"></br>
      </fieldset>
 
      <!-- edit yourself profile -->
      <fieldset id="step2" style="display:none">
        <legend>Edit Profile</legend>
        <label>Occupation<font color="red">*</font>: What do you do?</label><br>
        <input name="wsname" type="text"></br>
        <label>Company<font color="red">*</font>: Which company you are working for</label><br>
        <input name="company" type="text"></br>
        <label>Hometown<font color="red">*</font>: Where is you hometown</label><br>
        <input name="hometown" type="text"></br>
        <label>Mobilephone Number<font color="red">*</font>: Can we get your phone number?</label><br>
        <input name="phonenumber" type="text"></br>
      </fieldset>
      <fieldset id="step3" style="display:none">
          <legend>Welcome you</legend>
        <p>you can see the your user profile what you have entered.<p>
      </fieldset>
    </div>
    <div id="buttons">
      <input id="ButtonPrevious" type="button" value="Previous" disabled="disabled" name="" οnclick="handleWizardPre()"/>
      <input id="ButtonNext" type="button" value="Next" name="step2" οnclick="handleWizardNext()" />
      <input id="SubmitFinal" type="submit" value="Finish" disabled="disabled" />
    </div>
  </div>
</body>
</html>
相关文章
|
10天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
17天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
17天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
19天前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
15 1
|
20天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
11天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
8 0
|
11天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
8 0
|
11天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
7 0
|
12天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
12天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)