HTML,CSS,JS實例分析

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

創建一個固定長度的數組對象：

var 數組名稱=new Array(數組長度);（最常用的數組創建方式）

創建一個已知元素的數組對象：

var 數組名稱=new Array(元素，元素，元素...);

創建一個已知元素的數組對象：

var 數組名稱={元素，元素，元素...};

實例

今天我們來編寫一個信息註冊網頁，用上以前的知識哦~（集合html，css，js的簡單知識。主要以練習爲主，所以就可能比較不美）要實現既有html，也有css，也有js。並且具有點擊提交按鈕即可在空白頁顯示出內容的功能。圖片如下：

點擊提交按鈕後會出現如下效果：(前方高能！！）

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

首先，我們需要用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標籤的，但是要在"" 中寫代碼。
最終結果執行如下：
填寫表格：

點擊提交按鈕後：

好啦，雖然說我做的比較醜。但是我相信只要用心去做，就一定可以做好的。當然，幹咱們這一行的不能光用心哦~實際敲代碼動手操作纔是最重要的哈，那麼。。。明天見嘍~

HTML,CSS,JS實例分析

實例

Mybatis--概述

IDEA中查看java類的繼承結構以及各種方法

設計模式--簡介概述

微信小程序開發基礎--初識小程序

對於網頁代碼的調試方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結