HTML,CSS,JS例項分析
阿新 • • 發佈：2019-01-28
昨天我們大概只說了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 執行效果如下：
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">姓 名</td>
<td align="left"><input type="text" name="inps" /></td>
</tr>
<tr>
<td align="right">性 別</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">注 冊 密 碼</td>
<td>
<input type="password" name="inps" />
</td>
</tr>
<tr>
<td align="right">愛 好</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">自 我 介 紹</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+"  "
//+=就是hobby=hobby+hobbyInput[i].value+"  "
}
}
document.write("請核對您的資訊:"+"<br/>姓 名："+input1+"<br/>性 別:"+gender
+"<br/>注 冊 密 碼:"+input2+"<br/>愛 好:"+hobby
+"<br/>自 我 介 紹:"+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">姓 名</td>
<td align="left"><input type="text" name="inps" class="border" /></td>
</tr>
<tr>
<td align="right" class="sizec">性 別</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">注 冊 密 碼</td>
<td>
<input type="password" name="inps" />
</td>
</tr>
<tr>
<td align="right" class="sizec">愛 好</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">自 我 介 紹</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+"  "
//+=就是hobby=hobby+hobbyInput[i].value+"  "
}
}
document.write("請核對您的資訊:"+"<br/>姓 名："+input1+"<br/>性 別:"+gender
+"<br/>注 冊 密 碼:"+input2+"<br/>愛 好:"+hobby
+"<br/>自 我 介 紹:"+input3);
//文字輸出結果.
//一定注意輸出結果的時候不能在執行程式碼中間輸出,也就是document.write不能在程式碼中出現
//否則執行到程式碼中的document.write會直接跳轉介面,後面的輸出內容就無法在跳轉介面顯示
}
</script>
</html>注意 在document.write中是可以寫html標籤的，但是要在"" 中寫程式碼。
最終結果執行如下：
填寫表格：
點選提交按鈕後：
好啦，雖然說我做的比較醜。但是我相信只要用心去做，就一定可以做好的。當然，幹咱們這一行的不能光用心哦~實際敲程式碼動手操作才是最重要的哈，那麼。。。明天見嘍~