1. 程式人生 > >HTML,CSS,JS例項分析

HTML,CSS,JS例項分析

昨天我們大概只說了js的大體知識和語法,結構等基本內容,那麼我們今天就來一起寫一個具體例子幫助大家理解一下:
首先給大家補充一下昨天沒有說的知識點。
js中的數列 的定義以及使用方法:

  • 建立一個固定長度的陣列物件:
var 陣列名稱=new Array(陣列長度);(最常用的陣列建立方式)
  • 建立一個已知元素的陣列物件:
var 陣列名稱=new Array(元素,元素,元素...);
  • 建立一個已知元素的陣列物件:
var 陣列名稱={元素,元素,元素...};

例項

今天我們來編寫一個資訊註冊網頁,用上以前的知識哦~(集合html,css,js的簡單知識。主要以練習為主,所以就可能比較不美)要實現既有html,也有css,也有js。並且具有點選提交按鈕即可在空白頁顯示出內容的功能。圖片如下:
這裡寫圖片描述


點選提交 按鈕後會出現如下效果:(前方高能!!)
這裡寫圖片描述

那麼我們來一步一步實現吧!

  1. 首先,我們需要用html編寫一個靜態的網頁表格,程式碼如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>資訊登錄檔</title>
    </head>
    <body>
        <h1 align="center">請在下表填寫您的資訊</h1>
        <hr
/>
<br/> <table border="1px" bordercolor="yellow" cellpadding="0px" cellspacing="0px" align="center"> <tr> <td align="right">姓&nbsp;名</td> <td align="left"><input type="text" /></td> </tr
>
<tr> <td align="right">性&nbsp;別</td> <td> <label><input type="radio" name="gender" value="男"/><label> <label><input type="radio" name="gender" value="女"/><label> <label><input type="radio" name="gender" value="其他"/>其他<label> </td> </tr> <tr> <td align="right">注&nbsp;冊&nbsp;密&nbsp;碼</td> <td> <input type="password" /> </td> </tr> <tr> <td align="right">愛&nbsp;好</td> <td> <label><input type="checkbox" name="hobby" value="籃球" />籃球</label> <label><input type="checkbox" name="hobby" value="足球" />足球</label> <label><input type="checkbox" name="hobby" value="乒乓球" />乒乓球</label> </td> </tr> <tr> <td align="right">自&nbsp;我&nbsp;介&nbsp;紹&nbsp;</td> <td> <textarea rows="6" cols="50"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交" /> <input type="reset" value="重置"/> </td> </tr> </table> </body> </html>

執行效果如下:
這裡寫圖片描述

2.然後需要實現點選提交即可跳轉頁面顯示資訊的動態功能,程式碼如下:(此時要用 js 實現此功能)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>資訊登錄檔</title>
    </head>
    <body>
        <h1 align="center">請在下表填寫您的資訊</h1>
        <hr/>
        <br/>
        <table border="1px" bordercolor="yellow" cellpadding="0px" cellspacing="0px" align="center">
            <tr>
                <td align="right">姓&nbsp;名</td>
                <td align="left"><input type="text" name="inps" /></td>
            </tr>
            <tr>
                <td align="right">性&nbsp;別</td>
                <td>
                    <label><input type="radio" name="gender" value="男"/><label>
                    <label><input type="radio" name="gender" value="女"/><label>
                    <label><input type="radio" name="gender" value="其他"/>其他<label>
                </td>
            </tr>
            <tr>
                <td align="right">注&nbsp;冊&nbsp;密&nbsp;碼</td>
                <td>
                    <input type="password" name="inps" />
                </td>
            </tr>
            <tr>
                <td align="right">愛&nbsp;好</td>
                <td>
                    <label><input type="checkbox" name="hobby" value="籃球" />籃球</label>
                    <label><input type="checkbox" name="hobby" value="足球" />足球</label>
                    <label><input type="checkbox" name="hobby" value="乒乓球" />乒乓球</label>
                </td>
            </tr>
            <tr>
                <td align="right">自&nbsp;我&nbsp;介&nbsp;紹</td>
                <td>
                    <textarea rows="6" cols="50" name="inps"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交" onclick="Sub();"/>
                    <!<!--
                        作者:offline
                        時間:2018-07-31
                        描述:使用onclick事件屬性實現
                        點選按鈕提交就會執行Sub函式
                        注意此處的形式不要寫錯。
                    -->
                    <input type="reset" value="重置"/>
                </td>
            </tr>
        </table>
    </body>

    <script type="text/javascript">
        function Sub(){
            var inputs=document.getElementsByName("inps");
            //獲取name名字為inps的元件形成  陣列   inputs(注意是陣列,像getElementById獲取id就是單個元件)
            //由於姓名,密碼,自我介紹直接獲取到的value值就是所要的輸出值
            //所以通過給這三個標籤新增相同的name屬性來統一獲取(上面對應標籤新增name值相同)
            var input1=inputs[0].value;
            var input2=inputs[1].value;
            var input3=inputs[2].value;
            //將陣列中各個元件的value值賦予不同變數


            //單選由於value值雖然可以獲取,但是無法確定使用者的選擇.所以需要進行判斷.下面是實現單選框判定的方法:
            var genderInput=document.getElementsByName("gender");
            var gender="";
            //此處初始化定義空字元型別變數gender
            for(var i=0;i<genderInput.length;i++)//通過判斷性別是否被選中來確定要獲取哪個value值
            {
                if(genderInput[i].checked==1)//checked可以用來判斷genderInput[i]是否被選中並返回布林型別值  
                //1和0可以表示布林型別的true和fales
                {
                    gender=genderInput[i].value;
                    //將要輸出的結果“男,女,其他”賦予字元型別變數gender
                    break;
                }
            }


            //多選框和單選框問題一樣,只是可以進行多選而已.下面是進行多選的框判斷的方法:
            var hobbyInput=document.getElementsByName("hobby");
            var hobby="";
            //此處初始化定義空字元型別變數
            for(var i=0;i<hobbyInput.length;i++)//通過判別是否被選中來確定要獲取哪個元件value值
            {
                if(hobbyInput[i].checked==1)//同上
                {
                    hobby+=hobbyInput[i].value+"&nbsp&nbsp"
                    //+=就是hobby=hobby+hobbyInput[i].value+"&nbsp&nbsp"
                }
            }

            document.write("請核對您的資訊:"+"<br/>姓&nbsp名:"+input1+"<br/>性&nbsp別:"+gender
            +"<br/>注&nbsp;冊&nbsp;密&nbsp;碼:"+input2+"<br/>愛&nbsp;好:"+hobby
            +"<br/>自&nbsp;我&nbsp;介&nbsp;紹:"+input3);
            //文字輸出結果.
            //一定注意輸出結果的時候不能在執行程式碼中間輸出,也就是document.write不能在程式碼中出現
            //否則執行到程式碼中的document.write會直接跳轉介面,後面的輸出內容就無法在跳轉介面顯示
        }
    </script>
</html>

詳細分析已經在程式碼中註釋。要沉下心來看哦~結果執行如下:
這裡寫圖片描述
點選 提交 按鈕,結果如下:
這裡寫圖片描述
功能就完成了。但是頁面是不是依舊不堪入目呢?那麼我們進入第3步用CSS優化頁面靜態效果。

3.用CSS靜態修飾網頁效果:(你所掌握的CSS程式碼越多越深做出來的越好看哦~,我在這裡簡單的做一些css的例項,咱們主要學習思路哦~)程式碼如下:
這裡寫圖片描述
將css程式碼引入到 html檔案,此時程式碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>資訊登錄檔</title>
        <link rel="stylesheet" href="css/jshomeworkcss.css" />
    </head>
    <body id="bgcolor">
        <h1 align="center" class="sizec">請在下表填寫您的資訊</h1>
        <hr/>
        <br/>
        <table border="1px" bordercolor="yellow" cellpadding="0px" cellspacing="0px" align="center">
            <tr>
                <td align="right" class="sizec">姓&nbsp;名</td>
                <td align="left"><input type="text" name="inps" class="border" /></td>
            </tr>
            <tr>
                <td align="right" class="sizec">性&nbsp;別</td>
                <td>
                    <label><input type="radio" name="gender" value="男" /><span class="sizec"></span><label>
                    <label><input type="radio" name="gender" value="女" /><span class="sizec"></span><label>
                    <label><input type="radio" name="gender" value="其他"/><span class="sizec">其他</span><label>
                </td>
            </tr>
            <tr>
                <td align="right" class="sizec">注&nbsp;冊&nbsp;密&nbsp;碼</td>
                <td>
                    <input type="password" name="inps" />
                </td>
            </tr>
            <tr>
                <td align="right" class="sizec">愛&nbsp;好</td>
                <td>
                    <label><input type="checkbox" name="hobby" value="籃球" />
                        <span class="sizec">籃球</span>
                    </label>
                    <label><input type="checkbox" name="hobby" value="足球" />
                        <span class="sizec">足球</span>
                    </label>
                    <label><input type="checkbox" name="hobby" value="乒乓球" />
                        <span class="sizec">乒乓球</span>
                    </label>
                    <label><input type="checkbox" name="hobby" value="其他" />
                        <span class="sizec">其他</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right" class="sizec">自&nbsp;我&nbsp;介&nbsp;紹</td>
                <td>
                    <textarea rows="6" cols="50" name="inps"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交" onclick="Sub();"/>
                    <!<!--
                        作者:offline
                        時間:2018-07-31
                        描述:使用onclick事件屬性實現
                        點選按鈕提交就會執行Sub函式
                        注意此處的形式不要寫錯。
                    -->
                    <input type="reset" value="重置"/>
                </td>
            </tr>
        </table>
    </body>

    <script type="text/javascript">
        function Sub(){
            var inputs=document.getElementsByName("inps");
            //獲取name名字為inps的元件形成  陣列   inputs(注意是陣列,像getElementById獲取id就是單個元件)
            //由於姓名,密碼,自我介紹直接獲取到的value值就是所要的輸出值
            //所以通過給這三個標籤新增相同的name屬性來統一獲取(上面對應標籤新增name值相同)
            var input1=inputs[0].value;
            var input2=inputs[1].value;
            var input3=inputs[2].value;
            //將陣列中各個元件的value值賦予不同變數


            //單選由於value值雖然可以獲取,但是無法確定使用者的選擇.所以需要進行判斷.下面是實現單選框判定的方法:
            var genderInput=document.getElementsByName("gender");
            var gender="";
            //此處初始化定義空字元型別變數gender
            for(var i=0;i<genderInput.length;i++)//通過判斷性別是否被選中來確定要獲取哪個value值
            {
                if(genderInput[i].checked==1)//checked可以用來判斷genderInput[i]是否被選中並返回布林型別值  
                //1和0可以表示布林型別的true和fales
                {
                    gender=genderInput[i].value;
                    //將要輸出的結果“男,女,其他”賦予字元型別變數gender
                    break;
                }
            }


            //多選框和單選框問題一樣,只是可以進行多選而已.下面是進行多選的框判斷的方法:
            var hobbyInput=document.getElementsByName("hobby");
            var hobby="";
            //此處初始化定義空字元型別變數
            for(var i=0;i<hobbyInput.length;i++)//通過判別是否被選中來確定要獲取哪個元件value值
            {
                if(hobbyInput[i].checked==1)//同上
                {
                    hobby+=hobbyInput[i].value+"&nbsp&nbsp"
                    //+=就是hobby=hobby+hobbyInput[i].value+"&nbsp&nbsp"
                }
            }

            document.write("請核對您的資訊:"+"<br/>姓&nbsp名:"+input1+"<br/>性&nbsp別:"+gender
            +"<br/>注&nbsp;冊&nbsp;密&nbsp;碼:"+input2+"<br/>愛&nbsp;好:"+hobby
            +"<br/>自&nbsp;我&nbsp;介&nbsp;紹:"+input3);
            //文字輸出結果.
            //一定注意輸出結果的時候不能在執行程式碼中間輸出,也就是document.write不能在程式碼中出現
            //否則執行到程式碼中的document.write會直接跳轉介面,後面的輸出內容就無法在跳轉介面顯示
        }
    </script>
</html>

注意 在document.write中是可以寫html標籤的,但是要在"" 中寫程式碼。
最終結果執行如下:
填寫表格:
這裡寫圖片描述
點選提交按鈕後:
這裡寫圖片描述
好啦,雖然說我做的比較醜。但是我相信只要用心去做,就一定可以做好的。當然,幹咱們這一行的不能光用心哦~實際敲程式碼動手操作才是最重要的哈,那麼。。。明天見嘍~